render of a4j commandButton doesnt work; page not rendering - jsf

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>

Related

Popup not rendering in JSF

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"

a4j Render not working

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

How to rerender component inside modalpanel?

Is it possible? if yes, how do i do it?
I need to rerender a <h:outputText> after an <a4j:commandLink> action is executed, both components are inside a modalpanel and that modalpanel is inside a
I tried:
<a4j:commandLink value="somevalue" id="someid" action="#{MyBean.myAction()}"
reRender="outputtextid">
<f:param name="paramid" value="paramvalue"/>
</a4j:commandLink>
Make sure your <h:outputText> is outside the form that contains the <a4j:commandLink> or else it will bind the value of the outputText with the actual value in the form, leading to odd behavior in your page.
<h:form>
<a4j:commandLink value="somevalue" id="someid" action="#{MyBean.myAction()}"
reRender="outputtextid">
<f:param name="paramid" value="paramvalue"/>
</a4j:commandLink>
</h:form>
<h:outputText value="#{MyBean.outputValue}" id="outputtextid" />
If you must have the <h:outputText> inside the form, you should consider updating the value using the oncomplete tag attribute in the commandLink that executes JavaScript code.
In case you want to show a message to the user, you can use <h:messages> or <rich:messages> tag component, this will be a better option than using an outputText.

rich:modalPanel appearing for some seconds only

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>

Primefaces lightBox problem

I have created a page with primefaces where I use the Lightbox component.
I use it in a dynamic matter as I create tumbnails on the fly with a servlet call.
The first page shows up nice and the lightbox works as expected but when I load a new set of pictures for the next page the pictures are shown but when you click on it, it just shows the original picture in a new page, when I then return with the previous button and click on a a thumbnail it works as expected.
This is the jsf code:
<h:outputLabel id="curpage" value="#{pictureBean.currentPage}" />
<h:commandButton value="next" action="#{pictureBean.nextPage}" id="next">
<f:ajax render="lightBox curpage" />
</h:commandButton>
<br/>
<p:lightBox height="500px" id="lightBox">
<ui:repeat value="#{pictureBean.pictures}" var="pic">
<h:outputLink value="#{pic.url}" title="#{pic.description}">
<h:graphicImage value="#{pic.urlThumb}" style="width:100px;height:75px;"/>
</h:outputLink>
</ui:repeat>
</p:lightBox>
I fixed it myself :-) I was forgotten to add the tags between form tags.

Resources