I have a datatable that has both a rowSelect ajax event (for selecting a row and showing some extra information on some bottom panels) and a rowDblselect ajax event (for opening that record in an edit window).
<p:ajax event="rowSelect" listener="#{myBean.onSagRowSelect}" update=":bottomPanel" />
<p:ajax event="rowDblselect" listener="#{myBean.onSagRowDblClick}" update=":content" onstart="startWait();" oncomplete="stopWait();"/>
This worked fine until we added an ajaxStatus component that is meant to show a loading bar gif when an ajax call is made, to let the user know that something is happening in the page. The problem is that this ajaxSTatus component is blocking my rowDblselect event, now it will only trigger rowSelect event, even if I double click a row.
<p:ajaxStatus onstart="PF('loadingDialog').show()" onsuccess="PF('loadingDialog').hide()" />
<p:dialog widgetVar="loadingDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
<p:graphicImage name="../images/ajaxloadingbar.gif" />
</p:dialog>
We're using Primefaces 5.2.
Is there any way I can configure the ajaxStatus to delay the onstart or something similar so that it allows my double click event to complete?
Any help/advice on this matter is welcomed. Thank you!
I haven't tried that myself, but I think you could delay displaying the dialog for all events using JavaScript setTimeout, like this:
<p:ajaxStatus onstart="setTimeout(function() { PF('loadingDialog').show(); }, 500);"
onsuccess="PF('loadingDialog').hide()" />
Other option would be to set global="false" to the p:ajax for rowSelect only - it should stop triggering ajaxStatus for this particular event. You would then have to define onstart attribute to show the dialog with delay (as shown above) and oncomplete to hide it again:
<p:ajax event="rowSelect" listener="#{myBean.onSagRowSelect}" update=":bottomPanel"
global="false"
onstart="setTimeout(function() { PF('loadingDialog').show(); }, 500);"
oncomplete="PF('loadingDialog').hide();" />
By the way, I think you should really use oncomplete instead of onsuccess in this case since in case the ajax request fails for some reason, the dialog may stay displayed, blocking your application due to its modality.
Related
I am unable to get the ajax event click to work with primefaces selectOneMenu. Using the latest primefaces 11.0. The documentation states that these are available ajax events: blur, change, click, dblclick, focus, itemSelect, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, mouseup, select, valueChange.
<p:selectOneMenu value="#{beam.event}" editable="false" id="event">
<f:selectItems value="#{beam.events}"/>
<p:ajax event="click" onstart="console.log('start 1');" immediate="true" listener="#{beam.onClick}" update="#this"/>
<p:ajax event="click" onstart="console.log('start 2');" immediate="true" listener="#{beam.onClickNoParam}" update="#this"/>
</p:selectOneMenu>
The onstart client side callbacks are not triggered. The beam listeners look like this:
public void onClick(AjaxBehaviorEvent event) {
System.out.println("onClick");
}
public void onClickNoParam() {
System.out.println("onClick");
}
I did get the focus event to work, but it is triggered way to many times and unfortunately in combination with the the update one gets stuck in an endless recursive loop.
I don't notice any issues when the click event is registered by the AjaxBehaviorHandler/AjaxBehaviorListenerImpl compared to the focus event.
I have a save button which calls a method in my backing Bean. When it's clicked, I'd like to show notification message, and for that I went for Primefaces' ajaxStatus. . Here's the code of the button (p:commandButton):
<p:commandButton value="OK"
action="#{myBean.saveRecord}" />
and the ajaxStatus outside it:
<p:ajaxStatus onstart="PF('statusDialog').show();"
onsuccess="PF('statusDialog').hide();" />
<p:dialog modal="true" widgetVar="statusDialog"
header="Success operation" draggable="false"
closable="false" resizable="false" style="text-align: center">
</p:dialog>
thank you for your help
Add on your saveRecord method at the end:
RequestContext.getCurrentInstance().execute("PF('statusDialog').show();");
Once you have an ajaxStatus on your page, the javascript that you've putted on the onstart & onsuccess events will be triggered and you already now that, right ?!
On these scripts you can use the widgetVar directly because PrimeFaces create javascript variables on the global (window) scope with the names you informed:
onstart="statusDialog.show();" onsuccess="statusDialog.hide();"
If you want to reuse this solution on others pages just put it on a template file and enjoy :)
Sorry if i have misunderstood your problem.
Cheers
I need to trigger an ajax update upon change to a text box, which is a <p:autoComplete> component. I have observed that if the user opts to type the text manually, the event is a change, whereas if the user clicks one of the suggestions for the autocomplete, the event is itemSelect. So I added two <p:ajax> children to the input, each calling the same method and having the same update list, but one having event="change" and the other event="itemSelect".
However, I now discover something odd. For example, while in normal server mode I opened my page and typed "12". The autocomplete offered "1233" and "1234" as suggestions. I clicked "1233" and seemingly nothing happened. I clicked again and everything else filled in.
Repeat this in the debugger with a breakpoint on the event handler, and I can see that after the first click, the value is "12" and on the second click, it becomes "1233".
By switching commenting out the two different <p:ajax> I can see the different consequences. Without the "change" one, the handler is never called if the user selects an autocomplete suggestion, and without the "itemSelect" one, the handler is never called if the user types manually. But with both of them, there are two calls, and I'm sure there will be complaints about the double-click.
Some pseudo-code for those that like, first the xhtml:
<p:autoComplete id="itemId" value="#{myBacker.myBean.itemNumber}"
required="true" completeMethod="#{myBacker.idAutoComplete}">
<p:ajax event="itemSelect" update="beanDetails"
listener="#{myBacker.idChangeEventListener()}" />
<p:ajax event="change" update="beanDetails"
listener="#{myBacker.idChangeEventListener()}" />
</p:autoComplete>
<h:panelGroup id="beanDetails">
<h:panelGroup rendered="#{not empty myBacker.myBean.institutionName}">
<h:outputText value="#{myBacker.myBean.institutionName}" />
<!-- Continues with address, phone, etc.. -->
</h:panelGroup>
</h:panelGroup>
Then the Java backing bean code:
public void idChangeEventListener() {
myBean = myDAO.getDetails(myBean);
// another couple of init-type method calls
}
Give the parent tag a widgetVar attribute, then add this little attribute to the <p:ajax event="change" ...> child tag:
onstart="if(widgetVarName.panel.is(':visible')) return false;"
When the question was written, we were on PrimeFaces version 3.5, if I recall correctly. Since then, we need to update the solution to:
onstart="if(PF('widgetVarName').panel.is(':visible')) return false;"
with thanks to mwalter for pointing out the change.
I'am facing a strange situation were I have a commandButton (I have tried both standard h:commandButton and primefaces one p:commandButton), when the button is clicked a method in the backing bean is invoked and an Excel file is returned.This command button is inside a dialog, however I think this shouldn't affect.
Problem is that it seems that this button isn't generating any request, at least firebug doesn't show it, but I get the Excel file from the server, which doesn't make sense if there were no requests.
<h:commandButton id="downloadButton" value="Download" action="#{bean.downloadExcel}"/>
<p:commandButton id="downloadButton" value="Download" action="#{bean.downloadExcel}" ajax="false" onsuccess="confirmDialogWv.close();"/>
I don't use both buttons at the same time, just tested with both of them with same result.
What is the problem if "everything is working fine"? I can't close the dialog with an onsuccess event if I don't have any request.
Has someone faced this problem before? Any explanation?
Thanks in advance for your help!
EDIT:
<h:form id="contentForm" prependId="false" >
<!-- lot of code -->
<p:dialog id="confirmDialog"
modal="true"
closable="false"
widgetVar="confirmDialogWv"
resizable="false"
header="Confirm">
<p:commandButton id="downloadButton" value="Download" action="#{bean.downloadExcel}" ajax="false" onsuccess="confirmDialogWv.close();"/>
<p:commandButton id="openHtmlButton" value="Open HTML" process="#form" update="#form" actionListener="#{bean.openHtml}"/>
</p:dialog>
</h:form>
The second button opens a new window and works properly.
UPDATE:
As already said firebug doesn't show any request, but I've been testing now with IE and Chrome.
Chrome: Shows the request, but when I get the Excel file in the browser the status of the request becomes "canceled".
IE9: Shows the request and returns code 200, but the onsuccess event isn't triggered
I have a dialog on one of my pages. It opens fine. It works fine if you use the button on the page, it closes. However, if you try and "x" out of the dialog it will not close. I believe it is related to the fact that I have an input field on the dialog, but I am not sure. I apologize if this is a dupe, I could not find a similar post.
<p:commandButton action="#{phoneListBean.debugger}"
value="Merge Unqiue" onclick="mdlg.show();"
update=":pmsg, :createNewPanel, :listform" />
<p:dialog id="mdialog" header="Merge Unqiue" widgetVar="mdlg"
appendToBody="true">
<h:form id="mform">
<h:panelGrid columns="2" cellpadding="5" id="m">
<h:outputLabel for="listName" value="Enter the List Name:" />
<p:inputText value="#{phoneListBean.mergeList.name}" id="listName" />
<p:commandButton action="#{phoneListBean.mergeUnique}"
value="Merge Unqiue" update=":pmsg, :listform"
onclick="mdlg.hide();" />
</h:panelGrid>
</h:form>
</p:dialog>
Thanks in advance for the help.
Your problem is that you don't want to use the onclick attribute with Primefaces buttons for displaying and hiding the dialogs. The click event may not get invoked before the postback because these buttons are not Ajax enabled.
Instead you should use oncomplete attribute. This will notify the Javascript event to execute only after the server postback has occurred, meaning that show() will display already updated dialog contents, and hide() will occur only after the server side execution has finished.