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
Related
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 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"
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.
I am new to jsf. I have the bellow code. When I place ui:repeat inside rich:toolbar it prints the data. But when I place it after the toolbargroup inside composition tag it doesn't print anything. I have a toolbar and I want to show ui:repeat data bellow that toolbar. If I place it in toolbar it shows the data but inside the toolbar not bellow it. How can I place it bellow the toolbar?
Thanks.
Update: I found out the problem. The ui:repeat tag is showing up bellow the toolbar. So how can I add position to ui:repeat?
enter code here<h:body>
<ui:composition> <h:panelGroup layout="block">
<a4j:region>
<rich:toolbar id="header-toolbar" height="30px" itemSeparator="line">
<rich:toolbarGroup location="right" rendered="#{not empty searchType}">
<rich:menuItem
label="search"
mode="ajax"
execute="#this"
oncomplete="#{rich:component(searchFormModalPanel)}.show();"
status="status"/>
</rich:toolbarGroup> </rich:toolbarGroup>
</rich:toolbar>
</a4j:region> //Bellow doesn't show up! <ui:repeat value="#{breadCrumbMB.crumbs}" var="crumb" varStatus="crumStatus">
#{breadCrumbMB.incIndex()}
<h:outputLink value="#{crumb}">
<h:outputText value="#{breadCrumbMB.title(crumb.toString())}" rendered="${breadCrumbMB.lastLink()=='false'}"/></h:outputLink> >
<h:outputText value="#{breadCrumbMB.title(crumb.toString())}" rendered="${breadCrumbMB.lastLink()=='true'}"/>
</ui:repeat> </ui:composition>
</h:body>
Try to include ui:repeat inside a4j:region, if it doesn't work then use a4j:repeat
when i click the button handler.toggleCreatingTheme() is called, but the outputPanel is not rendering. When i refresh the page(f5) the content of the panel is showed.
<a4j:commandButton styleClass="simple-submit-button"
action="#{handler.toggleCreatingTheme()}"
rendered="#{!handler.creatingTheme}"
value="txt"
immediate="true"
render="newThemeForm" oncomplete="initEditor()" status="statusWait" />
<a4j:outputPanel id="newThemeForm" ajaxRendered="true" rendered="#{handler.creatingTheme}">
this tags are both in a h:form tag, there is just that one h:form.
How do I let the page refreshing on his own, so rendering the panel at the moment when i click the button?
Embed newThemeForm within another a4j:outputPanel and render it instead of reRendering newThemeForm.This is because newThemeForm will not be in DOM when trying to render it as it's rendered attribute will still be false.
Like:
<a4j:outputPanel id="outerPanel>
<a4j:outputPanel id="newThemeForm" rendered="#{bean.booleanvalue}">
</a4j:outputPanel>
</a4j:outputPanel>
Render outerPanel and not the newThemeForm.
i have tried the way that AhamedMustafaM mentioned but it didnt work with me , so i searched and tried for a little while so finally i got to make it work with a workaround, here is how
<a4j:commandButton id="clear" value="Clear" action="#{handler.clearData}" immediate="true" >
<!-- dummy call just to make it work -->
<a4j:actionListener listener="#{ViewerController.test}"/>
<f:ajax render="dataGroupPanel"/>
</a4j:commandButton>