How can I prevent a popupPanel from closing after I sumbit a form inside it?
My code for button:
<h:commandButton value="Search" action="#{facesBean.search()}" >
<f:ajax execute="#form" render="result" />
</h:commandButton>
My code for the panel to be rendered after submit:
<h:panelGroup id="result" rendered="#{facesBean.list != null}">
TEST TO RERENDER
</h:panelGroup>
They're in the same h:form.
Is there something wrong? I don't get any error when running it.
There are basically two ways:
Just submit the form by ajax.
If you can't submit by ajax for some reason, just reopen the popup panel on postback.
Related
I have an a4j command button which displays a loader in a pop-up panel using a4j:status onstart and onstop events. After action method linked with a4j:commandButton is completed, I want the button to be displayed as disabled on the screen.
I have created a boolean variable in backing bean of disableBtn which gets set to true in action method of a4j commandButton. when I render the button, the pop-up containing the loader doesn;t disappear
<h:form>
<a4j:status id="waitingMessage"
onstart="#{rich:component('modalPanelId')}.show()"
onstop="#{rich:component('modalPanelId')}.hide()">
</a4j:status>
<rich:popupPanel id="modalPanelId" modal="true"
autosized="true">
<h:graphicImage library="images" name="loading.gif" />
</rich:popupPanel>
<rich:panel id="updatePanel">
<div>
<a4j:commandButton value="Confirm Action"
styleClass="btn right"
disabled="#{bean.disableBtn}"
actionListener="#{bean.confirmAction}"
execute="#this" render="updatePanel"
immediate="true" />
</div>
</rich:panel>
</h:form>
Pop-up panel with loader should disappear upon completion of action of a4j:commandButton and button should be rendered as disabled.
A source of action cannot disable itself (I don't recall if this is a JSF thing or just RichFaces). Once the action is finished you got to have another component disable and rerender the button in response, simple a4j:jsFunction should do. Something like:
<a4j:jsFunction name="setEnabled" render="button">
<a4j:param name="enabled" assignTo="#{bean.buttonEnabled}"/>
</a4j:jsFunction>
<a4j:commandButton … oncomplete="setEnabled(false)" />
It's possible to disable the element with pure JavaScript onclick handler:
<a4j:commandButton
onclick="setTimeout('document.getElementById(\'' + this.id + '\').disabled=true;', 50);"
I am trying to show a popup menu in by checking some conditions, such as if something is not selected show popup etc. and if everyhing is fine submit the page. Here is the code:
<h:commandButton onclick="if (#{moneyTransferManager.showPopup()})
#{rich:component('popup')}.show();" value="Devam" >
<rich:componentControl target="popup" operation="show" />
</h:commandButton>
<rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="Simple popup panel" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('popup')}.hide();
return false;">
X
</h:outputLink>
</f:facet>
<p>
The popup panel is open and closed from the javascript function of component client side object. The following code
hide this panel:
<f:verbatim>#</f:verbatim> #{rich:component('popup')}.hide()
</p>
</rich:popupPanel>
then after button is clicked, popup shows for like a second and then page is refreshed and popup is lost. To prevent refreshing page i tried:
<f:ajax execute="#form" render="#none" />
but then if everything is right and if i don't need a popup i need to submit the page by commandbutton, but since i say render=#"none" i cannot do this. So what can i do about this situation?
Thanks
<h:commandButton> has a default button type submit which submits enclosing h:form when it is clicked. That is why the page refreshes when you click.
<h:button> should be used for java script usage.In addition, <h:commandButton> becomes <h:button> if type attribute is set to button.
<h:button onclick="if (#{moneyTransferManager.showPopup()})
#{rich:component('popup')}.show();" value="Devam"/>
Or
<h:commandButton type="button" onclick="if (#{moneyTransferManager.showPopup()})
#{rich:component('popup')}.show();" value="Devam" >
See Also :
Difference between h:button and h:commandButton
I have a modal panel similar to the one below in the xhtml page.
<h:form>
<a4j:commandLink action="" rerender="panel1">
</h:form>
<a4j:outputPanel id="panel1">
<rich:modalpanel>
<a4j:form>
<h:panelgroup binding=#{mybean.panel}/>
<a4j:commandButton id="save">
</a4j:form>
</rich:modalpanel>
</a4j:outputPanel>
When I click on the a4j command link,want to display the modal panel with differrent values. It works correctly if there is no a4j:form inside the modal panel. But I want to validate and save the attributes inside the modal panel on click of save button, and hence couldnt proceed with out the form component. But strangely when I add the a4j:form, panel group stop re rendering values. Please help me to sove this.
I also tried to place both inside same form, but then it worked in a very irregular manner.
Maybe try it this way:
<h:form>
<a4j:commandLink action="" rerender="panel1">
</h:form>
<rich:modalpanel>
<h:form>
<a4j:outputPanel id="panel1">
<h:panelgroup binding=#{mybean.panel}/>
<a4j:commandButton id="save">
</a4j:outputPanel>
</h:form>
</rich:modalpanel>
Works for me with Popuppanel
I am using primefaces dialogbox for popup purpose. But everytime it gets opened the whole screen get refreshed automatically and the popup disappears.
< p:dialog id="dialog" header="Select different user" styleClass="atf-header" widgetVar="dlg" appendToBody="true">
<ui:include src="searchpopup.xhtml" />
</p:dialog>
<h:panelGroup>
<h:outputLabel value="#{I18N['Create_Ticket_for_other_users']}" styleClass="atf-header" style="width:600px"></h:outputLabel>
</h:panelGroup>
<h:panelGroup id="search_section" layout="block"
styleClass="atf-content-area atf-separarot-botton" style="width:600px">
<h:panelGroup id="input_search_section" >
<h:outputText id="name" value="Siddharth Mishra"
labelStyleClass="atf-label">
</h:outputText>
</h:panelGroup>
<h:panelGroup styleClass="atf-right atf-inline-block">
<p:commandButton id="btn_search" value="select different user"
styleClass="atf-button-search" onclick="dlg.show()">
</p:commandButton>
</h:panelGroup>
</h:panelGroup>
You p:commandButton is AJAX button (which is default in primefaces) which submits whole form. Add type="button" attribute to it so it will be just ordinary button which do some JavaScript (so called push button). Also I don't see where is h:form tag here. As you have appendToBody="true" in you p:dialog be shore that you don't encapsulate p:dialog inside h:form. You should have h:form inside p:dialog if it is necessary, and if it is not move p:dialog outside of h:form.
I have used rich:menuItem to display rich:modalpanel. Code of rich:menuItem is as follow:
<rich:menuItem>
<a4j:commandLink
value="Add Machine"
oncomplete="#{rich:component('addMachinePanel')}.show()"
reRender="addMachinePanel">
</a4j:commandLink>
</rich:menuItem>
And rich:modalpanel code is
<rich:modalPanel id="addMachinePanel">
<a4j:form>
<a4j:commandButton value="Cancel"
action="#{adminBean.cleanupMachineToEdit}"
onclick="#{rich:component('addMachinePanel')}.hide(); return false;" />
</a4j:form>
</rich:modalPanel>
With above piece of code, rich:modalpanel is appearing for one or two seconds and again disappear.
Please help me to find out the issue.
Thanks
By default , the submitMode attribute for the rich:menuItem is server , which will submit the form and completely refreshes the page.
You can change the submitMode to the ajax to performs an ajax form submission. Only the elements specified with the reRender attribute will be refreshed instead of whole page.
Or , you can change it to none (for richfaces 3.X) or client (for richface 4.0) such that there are no form submission.
<rich:menuItem submitMode="ajax">
<a4j:commandLink
value="Add Machine"
oncomplete="#{rich:component('addMachinePanel')}.show()"
reRender="addMachinePanel">
</a4j:commandLink>
</rich:menuItem>