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"
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 need a rich:popup that shows a rich:extendedDataTable, and when the user presses a button, the popup should be shown, and the extendedDataTable must be re-rendered, here is the code:
<rich:popupPanel id="popupId" show="false" modal="true">
<h:form>
<rich:extendedDataTable
value="#{bean.list}"
var="item" rows="5" id="table">
<rich:column>
<h:outputLabel value="#{item}" />
</rich:column>
</rich:extendedDataTable>
<a4j:commandButton value="x" immediate="true"
oncomplete="#{rich:component('popupId')}.hide(); return false;"/>
</h:form>
</rich:popupPanel>
<h:form>
<a4j:commandButton value="show"
oncomplete="#{rich:component('popupId')}.show(); return false;"
render="table" immediate="true" />
</h:form>
The first time I press the show it works fine, but when I close the panel with the X button and press again the show button, the extendedDataTable appears empty (It's rendered but appear empty, see image below).
The problem is fixed if I add an empty extendedDataTable before the popup, like this:
<rich:extendedDataTable />
<rich:popupPanel>
...
With rich:dataTable the problem doesn't exits, but I need a extendedDataTable.
And aditional extrange behaviour is when I resize the browser, the data appears.
Platform
RichFaces: 4.2.2.Final
Spring: 3.1.1.RELEASE
Cheers
Use onclick instead of oncomplete. ExtendedDataTable doesn't render properly inside invisible elements (it's a bug) so the popupPanel has to be made visible before the rerendering.
I had kinda the same issue.
I solved it in a not 100% richface correct way:
<a4j:commandButton
value="show"
action="#{actionForm.setShowEditor('true')}"
oncomplete="javascript:location.reload(true)"/>
<a4j:region layout="block" rendered="#{actionForm.showEditor}" id="panelArea">
<rich:popupPanel id="#{popupID}" modal="true" show="true" domElementAttachment="parent">
....
tabel
buttons
....
</rich:popupPanel>
</a4j:region>
The popup is always shown (show="true") inside the a4j:region.
But the a4j:region is only shown if variable to show the popup = true.
The full page refresh was in my case needed because otherwise my ckeditor had some initialisation errors. It should also work if you only rerender the a4j:region after you set the "#{actionForm.setShowEditor('true')}.
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 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()" />