I have a commandButton and a dialog. The problem is after the dialog box appears, it disappears(1-2 miliseconds later). Is there a problem with my commandbutton or its dialog issue?
<p:commandButton id="showDetailsButton"
title="Details"
onclick="details.show();"
process="#this"
update=":tabView:myForm:myDialogId"
icon="ui-icon-search">
</p:commandButton>
<p:dialog id="myDialogId"
header="Details"
widgetVar="details"
resizable="false"
height="600"
width="450"
>
//some stuff
</p:dialog>
Changed onclick to oncomplete and now It's working perfectly.
<p:commandButton id="showDetailsButton"
title="Details"
oncomplete="details.show();"
process="#this"
update=":tabView:myForm:myDialogId"
icon="ui-icon-search">
By default a <p:commandButton> is rendered as
<button type="submit" ....> ... </button>
EDIT: Iff you've disabled ajax behavior by specifying ajax=false, please read comments below.
and hence it will trigger a Post Back. So your page makes a POST request to server and refreshes.
Btw, you don't need a PrimeFaces commandButton here, simply use
<input type="button" onclick="details.show()" value="Details"/>
remove the process and update from your commandbutton. They refresh the page/section. And you don't want that.
Related
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 have a4j command button in one xhtml page and popup panel in other. I want to open the the popup on commandbutton click in first page.
the command button
auth.xhtml
<a4j:commandButton id="Add" value="Add New" type="submit"
action="#{controller.add}"
render=":addPopupForm:addPopupOp">
<a4j:param value="true" assignTo="#{controller.ind}" ></a4j:param>
</a4j:commandButton>
addPopup.xhtml
<h:form id="addPopupForm">
<a4j:outputPanel id="addPopupOp" ajaxRendered="true">
<rich:popupPanel id="addPopup" domElementAttachment="parent" show="true"
rendered="true" height="600" width="1000" >
Row is added
</rich:popupPanel>
</rich:outputPanel>
</h:form>
I'm not a richfaces user but in general JSF , you can't re-render elements which are not rendered in the first place.
So in your case you should point to addPopupForm , like this :
<a4j:commandButton id="Add" value="Add New" type="submit"
action="#{controller.add}"
render=":addPopupForm" >
Or wrap the a4j:outputPanel with some wrapper that will be always rendered
Also, take a look at this: Can you update an h:outputLabel from a p:ajax listener?
Just rendering the panel does not mean showing it. You have to attach the popup "show" attribute to a property:
show="#{bean.showPopup}"
Set the showPopup boolean in the action method (action="#{controller.add}") and then do render="addPopupForm"
Someone who have used Primefaces 4.0-SNAPSHOT may have noticed the following warning.
The appendToBody attribute of the ConfirmDialog will be deprecated in
future versions. Please use appendTo="#(body)" now
Along with Primefaces 4.0 RC1, I have this piece of code.
<h:body>
<h:form prependId="true" id="form">
<p:confirmDialog id="confirmDialog"
widgetVar="confirmDeleteMultiple"
message="Message"
showEffect="true"
hideEffect="true"
header="Header"
severity="alert"
closeOnEscape="true"
appendTo="#(body)" <-----------------
closable="true">
<p:commandButton id="btnYes"
value="Yes"
process="#this"
oncomplete="confirmDeleteMultiple.hide()"/>
<p:commandButton id="btnNo"
value="No"
onclick="confirmDeleteMultiple.hide()"
type="button" />
</p:confirmDialog>
<p:commandButton oncomplete="confirmDeleteMultiple.show()"
update=":form:confirmDialog"
actionListener="#{testManagedBean.insert}"
ajax="true" type="submit" value="Submit"/>
</h:form>
</h:body>
When the only command button on the page is clicked, the dialog appears with the two buttons given.
On pressing any of these buttons, the dialog disappears but leaving the background opacity. The background opacity loses only when the page is reloaded.
Why does this happen with this new version? Any suggestion? In earlier versions, this was just fine.
It is associated with showEffet and hideEffect attributes of confirm dialog - from PrimeFaces Forum.
There is a misuse of effect attributes, "true" is not a valid value,
should be bounce, fade ... 4.x is more strict about wrong attribute
values
I have the following code inside a registration form. Basically the button calls an action (an Ejb method and an Action listener which is an utility method).
When the user submits the registration form, a primefaces dialog should appear telling the user that registration is being processed. The same dialog disappears once the form is submitted. This can be achieved by Primefaces UIBlock; however, it requires the commandButton to be ajax enabled.
I thought about using : onstart = display some modal dialog & onsuccess or on complete = hide this dialog (<p:dialog widgetVar="dialog" ...) but this solution requires ajax to be enabled for primefaces commandButton.
Any clues on how I could achieve this while setting ajax to false inside a PrimeFaces commandButton?
Thanks
<h:form id="form_register">
<p:panel id="panel_register">
<div align="center" style="padding: 5px;">
<p:commandButton id="register" ajax="true"
actionListener="#{mailBean.deliverEmail(newMember.email,newMember.name, newMember.username, newMember.password, newMember.isadmin)}"
action="#{memberController.register}" value="Register"
label="Register">
<f:setPropertyActionListener target="#{requestScope.wait}"
value="#{true}" />
</p:commandButton>
</div>
<p:blockUI block="panel_register" trigger="register">
<h:outputText value="Please wait..." />
<br />
<p:graphicImage value="#{resource['gfx/gif.gif']}" />
</p:blockUI>
EDIT: Thanks guys. I was mis-using the update the attribute in commandButton. Now things work fine.
You should use the onstart and oncomplete actions to display/hide the dialog.
<p:commandButton id="register" onstart="dlg.show()" oncomplete="dlg.hide()" />
I want to display the header of the modal popup with the value chatBean.selectedUser. The thing that happens is that onclick event is fired before action event so the page is not refreshed when the onclick event is fired. Hence I cannot get the header of modal pop up as the value contained in chatBean.selectedUser. Is there anyway that I can display the header of modal popup with the value chatbean.selectedUser after that the page is submitted?
Here is the relevant part of the view:
<h:form>
<p:selectOneMenu value="#{chatBean.selectedUser}" id="select">
<f:selectItems value="#{chatBean.friendList}" var="users" itemLabel="#{users.firstName}" itemValue="#{users.firstName}"/>
</p:selectOneMenu>
<p:commandButton id="basic" value="Basic" onclick="dlg.show()" type="button" action="#{chatBean.refresh}"></p:commandButton>
<p:dialog id="modalDialog" header="#{chatBean.selectedUser}" widgetVar="dlg" modal="true" height="100">
<h:outputText value="This is a Modal Dialog." />
<h:inputText></h:inputText>
</p:dialog>
</h:form>
You should show the dialog only when the action is completed, not before. Use the oncomplete attribute instead.
<p:commandButton ... oncomplete="dlg.show()" />
Don't forget to explicitly update the dialog's content before opening it. I don't see that anywhere in your code. Perhaps you're using RequestContext#update() or something, but normally you'd use update attribute for this.
<p:commandButton ... update="modelDialog" oncomplete="dlg.show()" />
Also, the type="button" is strange. This way the action wouldn't be invoked at all, but perhaps that's just a careless leftover of experimentation. Remove it.