I am using jsf and primefaces.
I have a Form in which i have a StudentId input Text and a command Link to View Student Details in a new Pop-Up and a Get Command Button to display
I want to Achieve this When i Click on Get Button.
if the pop-up window is not Opened before then dont open a Pop-Up.
if the pop-up window is already opened, then refresh that window with new arguments.
Here is my Code :
View page :
...//js code is below ..
<h:outputText value="StudentId :" />
<p:inputText value="#{myController.studentId}" >
<pe:keyFilter mask="num"/>
</p:inputText>
<p:commandButton value="Get" actionListener="#{myController.getStudentMarksDetails(myController.studentId)}" >
<p:commandLink onclick="openWindow('http://www.google.com','pageName')" >
<h:outputText value="Student Info ">
</p:commandLink>
...//Displays Student Marks
MyController
public Student getStudentMarksDetails(Long studentId){
//Some Code to Get the Student Marks
// I want to Check whether a Pop-Up already exists or not, if pop-up is opened then refresh with this url
RequestContext.getCurrentInstance().execute("updatePopUpWindow('http://stackoverflow.com','pageName');");
}
My JS
var myWindow;
//Opens in the Same window
function openWindow(url, name){
myWindow = window.open(url, name,'status=no,toolbar=no,location=no,menubar=no,resizable,width=1008,height=690,scrollbars,left=100,top=50,').focus();
}
// To check whether a Pop-Up window is opened or not
//if the pop-up window with pageName is not Opened before then dont open a Pop-Up.
//if the pop-up window is already opened, then refresh that window with new arguments.
function updatePopUpWindow(url, name){
if(myWindow!=null){
if(!myWindow.closed){
myWindow.close();
}
}
//Check the condition Here
myWindow = window.open(url, name,'status=no,toolbar=no,location=no,menubar=no,resizable,width=1008,height=690,scrollbars,left=100,top=50,').focus();
}
I tried Placing this Condition but no use:
if(myWindow.name == name){
myWindow = window.open(url, name,'status=no,toolbar=no,location=no,menubar=no,resizable,width=1008,height=690,scrollbars,left=100,top=50,').focus();
}
I referred many links, but unable to solve the way i need.
How to implement this issue in JQuery as JS properties are independent to Browsers
Updated Comments:
I cannot use a PF Dialog as i dont have any idea of how and What Type of Data and View will come from that External Service Link. Think that i am not the author of the URL which i pass to get the Student Details.
I think that it may(and also may not) be the case you can use PF Dialog. Depends on the page you want to show in it. I used following example to show content of external page in a dialog:
Managed bean
#ManagedBean
#ViewScoped
public class Bean {
private String myURL;
public Bean() {
myURL = "http://www.stuba.sk/english.html";
}
public void handleUpdateDialog(){
myURL = "http://www.stuba.sk/english/news/news.html";
}
//getters and setters
...
}
xhtml
<h:form>
<p:commandButton value="Show Dialog" oncomplete="dlg.show();" update="dlgId"/>
<p:commandButton value="Update Dialog" actionListener="#{bean.handleUpdateDialog}" oncomplete="dlg.show();" update="dlgId"/>
<p:dialog id="dlgId" widgetVar="dlg">
<iframe frameborder="0" align="left"
src="#{bean.myURL}" id="someId" scrolling="auto"
width="600" height="500">
</iframe>
</p:dialog>
</h:form>
As you can see, I used an iframe in PF Dialog, which I can update(also refresh). There are some pros and cons if you would like to use it like this. The good news for you is that you can refresh this dialog. However, the main drawback of this solution is that it doesn't work for every external page as there are many pages which can't be shown in frame due to 'X-Frame-Options' setting (such as google.com, facebook.com ...), which you can't affect unless you are the author of the page.
I need to disable the button based on the selected row of t:dataTable.
This is the javascript method I'm calling on the row selection event
(the button should be disabled if an item in the selected row has a tooltip... it's ugly, but it was the easiest thing to do):
function processUpdateButton() {
if (!$(".selectedRow").length
|| $(".selectedRow").children().find(".tooltip").length){
$(".Update").button({disabled:true});
} else {
$(".Update").button({disabled:false});
};
}
This is the JSF commandLink:
<h:commandLink id="update" styleClass="Update iconButton"
action="#{myBB.update}"
value="#{gui['button.update']}"
tabindex="301"/>
Setting disabled attribute to the button works. The button is greyed out and if I hover the mouse over it, the cursor doesn't change as it does for other links. The problem is, that I can still click it and the method in the backing bean is called. Is there some way to prevent that?
Here's the rendered disabled button:
<a id="mainForm:update"
class="iconButton ... ui-button-disabled ui-state-disabled"
onclick="return myfaces.oam.submitForm('mainForm','mainForm:update');"
href="#" role="button" aria-disabled="true" disabled="disabled">
<span class="ui-button-text">Update</span>
</a>
I should probably remove the onClick attribute, but I don't know how I would be able to reenable it again.
Of course I can check the condition on the server after clicking the Update button, but that's the last resort. It would be nice if I could completely disable the button generated by JSF only from javascript without call to the server.
So I've found the solution. I copied the onclick attribute to another attribute on disabling button and vice versa:
var onclick;
if (!$(".selectedRow").length
|| $(".selectedRow").children().find(".tooltip").length){
$(".Update").button({disabled:true});
onclick=$(".Update").attr('onclick');
$(".Update").attr('onclick2',onclick);
$(".Update").removeAttr('onclick');
} else {
$(".Update").button({disabled:false});
onclick=$(".Update").attr('onclick2');
$(".Update").attr('onclick',onclick);
$(".Update").removeAttr('onclick2');
};
As you can see the generated html code is not a button but hyperlink. So you need to remove the link from link tag. Could try follows:
$(".Update").removeAttr('href');
I'm a newbie here and I would like to consult something regarding JasperReports and servlets.
I have a form called appform.jsp which is an application page.
What I want to achieve is that when I click the Submit button of the application page, a new tab will open then a PDF file will be displayed.
The submit button calls the sevlet that will generate the pdf then the PDF will be displayed in a new tab.
I wonder if this line is correct
<input type="submit" value="Submit" onClick="validateForm(); openinnewtab('<%=request.getContextPath()+"/readFields"%>')" >
validateForm() is just a javascript checker for empty fields, readFields is my servlet and my form's onsubmit tag is on return false;
Thank you.
give target="_blank" in the form tag. some browsers open a page some a tag . you can also try target="_new" using this you can easily open new tab
Is it possible to have panel popup window in JSF 1.1 ? I would like to display a popup window when I click edit button and then would like to have few components in that panel popup window.
I am not using any other JSF like icefaces or richfaces, just plain JSF 1.1.
Any help is highly appreciable.
Thanks
Yes, it's definitely possible. Just bring in some good shot of JavaScript and/or CSS to show/hide and style the popup window. That's also what the average component library like RichFaces is doing with the only difference that it's all wrapped in a simple JSF component.
At its simplest you can use JS window.open() on click of a button/link.
<h:commandButton value="Edit" onclick="window.open('edit.jsf?id=#{item.id}'); return false;" />
The window.open() allows for fine grained customization of the window, such as the size and the browser bars which are to be displayed/hidden. Read the MDN documentation to learn about them. Returning false is mandatory to prevent the button from unnecessarily submitting the form.
Then, in the constructor of the backing bean associated with edit.jsf, you can grab the item by the id which is been passed as request parameter.
private Item item;
public EditItemBean() {
String id = (String) FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("id");
this.item = someItemService.find(Long.valueOf(id));
}
Nasty, but that's what you get with JSF 1.1 which doesn't offer a JSF 1.2-supported #PostConstruct annotation or JSF 2.0-supported <f:viewParam> tag.
Finally, in the edit.jsf you need to bring in some conditionally rendered JavaScript piece which reloads the parent window (so that the edited data is redisplayed) and closes the popup window.
<h:form>
...
<h:commandButton value="Save" action="#{editItem.save}" />
</h:form>
<h:panelGroup rendered="#{editItem.success}">
<script type="text/javascript">
window.opener.location.reload(true);
window.close();
</script>
</h:panelGroup>
Set the success boolean in the action method when the saving is successful.
public void save() {
// ...
this.success = true;
}
There exist also solutions using a so-called "overlay window" dialog which is basically <div> which is positioned using CSS position: fixed; and spans the entire browser window with a transparent background and then therein another <div> which is centered and contains the real form. This however requires a bigger shot of JS/CSS. This is also what the average JSF component library and JavaScript framework/plugin (such as jQuery or YUI) is basically doing. It's only trickier to get it work seamlessly together with JSF as you would of course like to redisplay the popup when a validation error on the popup form occurs and that kind of things. It's much easier if you're using an ajax-enabled JSF implementation/library.
Hi
I want to set focus on <h:inputText> element whenever rich:panelBarItem is opened.
I have:
<rich:panelBar>
<rich:panelBarItem onenter="setFocus();">
<h:inputText value="#{bean.value}"/>
</rich:panelBarItem>
</rich:panelBar>
it works fine when I open it with mouse click, but does not work first time when first panelBarItem is automatically opened.
How should I set focus on first opened panelBarItem? I really would like it to be some event(I could not find) on rich:panerBarItem or rich:panelBar.
You can call your method after page load to set focus to field. Something like
<script>
//call after page loaded
window.onload=setFocus();
</script>
or
<body onload="setFocus();">