JSF richfaces: update (rerender) element + close popup on click a4j:commandButton - jsf

I have a a4j:commandButton in my popup. On click I want to hide my popup and rerender some component.
<a4j:commandButton type="button" styleClass="left" value="#{bean.value}"
actionListener="#{bean.action}"
render="updComponent"
oncomplete="#{rich:component('popup')}.hide()"/>
In this case component is rerendered, but popup isn't hiding.
If I use rerender="updComponent" instead of render="updComponent", popup is hiding, but element isn't rerendered.
If I use instead of oncomplete="#{rich:component('popup')}.hide()" this:
<rich:componentControl target="deactivateIp" event="oncomplete" operation="hide"/>
popup isn't hiding, component isn't rerendering.
What I'm doing wrong and how to achieve what I want?

I've used onbegin instead of oncomplete and it works for me.
If I don't mistake, it's jsf bug: after render oncomplete event isn't firing.
<a4j:commandButton type="button" styleClass="left" value="#{bean.value}"
actionListener="#{bean.action}"
render="updComponent"
onbegin="#{rich:component('popup')}.hide()"/>
Maybe not the best solution, but I haven't found out any other.

Related

jsf different between ajax=true and ajax=false

I have a JSF page. The framework is PrimeFaces.
The layers build up like topbar, sidebar, main-layout.
The sidebar and top bar contain a menu. Both menus are in a <form>:
<p:commandLink action="#{bean.modify}" ajax="false">
<span>Modify</span>
</p:commandLink>
The main layout also contains buttons form in another form tThe button contains a confirmDialog):
<p:commandLink id="close" action="#{bean.close}" ajax="false" update="form">
<span>Close</span>
<p:confirm header="Lezárás" message="Are you sure close it?" icon="ui-icon-alert"/>
</p:commandLink>
If I use ajax=true, just by clicking on the button in the main layout, confirmDialog does not appear.
If I use ajax = false, confirmationDialog will appear, but the page will break down for a short time. First, the page will be displayed without css formatting, and later the css will be validated.
Why can this be? What's the difference between the seven calls? In one case, why does this render the rendering in the other case why the confirmDialogs do not come up?
Update:
I've read the link, but I still do not understand why it works.
I may have written the problem incorrectly.
There is a JSF page: list.xhtml. It is a commandLink
<p:commandLink action="#{bean.modify}" ajax="false">
<span>Modify</span>
</p:commandLink>
The backing bean:
public String modify(){
return "edit.xhtml";
}
The edit.xhtml has the button with confirmDialog:
<p:commandLink id="close" action="#{bean.close}" ajax="false" update="form">
<span>Close</span>
<p:confirm header="Lezárás" message="Are you sure close it?" icon="ui-icon-alert"/>
</p:commandLink>
If I call edit.html with list.xhtm with ajax = true then confirmDialog works but the page is rendering slowly.
If I call ajax = false then rendering is fast but confirmationDialog does not work.
I do not understand because it is another page, so not just part of it is updated but the entire page
Solved
There was a bug in PrimeFaces.
https://github.com/primefaces/primefaces/commit/9f86efba16ead70f9db1194744d291a7f64acefb
I've corrected the bug in source code version 6.2 and has been working well since then.

How to hide/show a panel conditionally in primefaces/jsf2 on commandButton click?

I want to hide/show <p:panel> on commandButton click with some condition ,I tried following
<h:form>
// some tag here
<p:commandButton value="EDIT" ajax="false"
onclick="if(#{bean.status == 'ACTIVE'}){editable.show();}"
actionListener="#{beanMgnt.edit}">
</h:form>
and editable is a panel as
<p:panel widgetVar="editable" closable="true"
toggleable="true" visible="false">
// some tags here
</p:panel
edit method is doing only sysout.
What I want when enduser clicks the button this panel will be visible with bean data populated with Editable text boxes.
I want to make visible this panel visible with button click.How to do that?
You also have to use update="<id>" in your button...
so,for example, you would need <p:commandButton...update="thepanelid".../> <p:panel id="thepanelid"...
I think you could use a boolean attribute in your backing bean. In the panel you put : visible="backingbean.yourAttribute" and you use a method in your bean to control it via onclick.
onclick="backingbean.theMethod"
In the method, if your condition is verified, you can set the attribute to "true".

Remove component from page source when visible is set to false

I have a situation when I want a primefaces' dialog to be displayed only under some conditions so what I made is to set visible attribute. Now I wonder, is it possible to hide component in rendered html when visible is set to false? Let's say someone wiser will work with my application and he will decide to display page's source code and there he will notice my hidden dialog and then he will remove my 'visible' attribute. What happens is that dialog will be displayed to him although it shouldn't be shown. Of course I can write my methods in such way that even if he display the dialog he will not be able to do anything wrong but I would prefer to remove my dialog from rendered html. Is it possible?
Use the rendered attribute and set it to false.
<h:panelGroup layout="block" id="enclosing-panel">
<p:dialog header="Basic Dialog" widgetVar="dlg1" minHeight="40" rendered="#{somecController.dialogRendered}">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
</h:panelGroup>
Whenever you need the dialog use ajax to refresh a div(<h:panelGroup/>) enclosing the dialog.
<p:commandButton value="show dialog" type="button" oncomplete="PF('dlg1').show();" actionListener="#{somecController.refreshPanel}" update="enclosing-panel" />

render of a4j commandButton doesnt work; page not rendering

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>

Opening a Rich Modal Panel on Button Click

I m trying to open a rich modal panel with populated data on a button click
tried
<h:commandButton id="btn_search" value="#{text['button.add']}"
action="#{cartBean.search}"
oncomplete="#{rich:component('dlg_results')}.show()">
</h:commandButton>
and
<h:commandButton id="btn_search" value="#{text['button.add']}"
action="#{cartBean.search}" immediate="true">
<rich:componentControl for="dlg_results" attachTo="btn_search" operation="show" event="onclick"/>
</h:commandButton>
This code opens the model panel on button click but when response is sent back from the server the whole page gets refreshed
can some one suggest a way to handle this ???
Use <a4j:commandButton> instead of h:commandButton.
Thanks, this was helpful information.
I used showWhenRendered tag in rich:modalpanel to solve my problem. I added a variable in my bean and set its value to true on click of button if records are found.

Resources