How can I have a PrimeFaces component, e.g. a p:commandButton, getting updated after every ajax function in the page? I need something that would work with a complex html, with lots of forms, dialogs etc
this is what you are looking for
<p:outputPanel autoUpdate="true">
<p:commandButton ... />
</p:outputPanel>
Related
I have to validate that a field in a form is not empty.
The problem is that the form is in a JQueryUI dialog (since I don't know how to create "windows" in JSF), so when I click the commandButton the page is refreshed and the JQuery dialog is lost. After refreshing, I can see the error message was printed in the page code by looking at the source code. If I use ajax in the commandButton then the page is not refreshed but I don't get the message printed, I got it as a sort of "Javascript alert" in the browser.
How can I get the error message without refreshing the page?
<h:inputText value="#{myController.name}" id="myname" required="true" requiredMessage="Name required">
<f:ajax />
</h:inputText>
<h:message errorClass="..." for="myname" />
Note: This looked similar to my problem but I don't think the solution is what I'm looking for.
Note: I am not using additional libraries like Primefaces, etc
With the hint of the comment, I was able to solve it this way:
In the commandButton, use ajax with both render and execute (render only doesn't work):
<h:commandButton id="...." action="#{myController.doSomething()}" type="submit" value="Do something">
<f:ajax execute="#form" render="#form" />
</h:commandButton>
Create a "pageUpdate()" method in myController that is called at the end of myController.doSomething(). This way, after the actions, the page is refreshed and the dialog is gone. There are of course other ways to close the dialog, but it is convenient for me to update the page when there is no error in the dialog action, so my objects in memory are updated too.
I think JQuery dialog messes with my styles after the ajax call returns with error, so check that out if you do it.
I have a dropdown and checkbox in my page and if we select a dropdown then the checkbox has to be disabled. We should not use JavaScript for this. I am new to JSF. Is there a way by using JSF. Any ideas.
Just add a <f:ajax> which executes on change of the dropdown and updates the checkbox whereby its disabled attribute checks if the dropdown's value is not empty.
E.g.:
<h:selectOneMenu value="#{bean.selectedItem}">
<f:selectItems value="#{bean.availableItems}" />
<f:ajax render="checkbox" />
</h:selectOneMenu>
<h:selectBooleanCheckbox id="checkbox" disabled="#{not empty bean.selectedItem}" />
That's basically all.
Please note that this uses under the covers still JavaScript for the job! The only difference is that you don't need to manually write any line of JavaScript code, instead JSF autogenerates the necessary JS code for you.
I have a form that is defined in a separate jsf page. This is is included to the main page when i click a link. Now the form is being displayed correctly. But the problem is that the submit button is not calling the action function defined.
The code to include the page( As suggested in this question: JSF2 Dynamically loading pages by ajax
<h:panelGroup id="editdivparent" layout="block">
<h:panelGroup id="editdiv" rendered="#{formsBean.edituserdiv}" layout="block">
<h:form id="userform" class="form-horizontal">
<ui:include src="edituserdetails.xhtml">
</ui:include>
</h:form>
</h:panelGroup>
</h:panelGroup>
The included page contains just the form elements with submit button:
<h:commandButton action="#{userBean.register() }" value="Update">
</h:commandButton>
I am getting no errors. On submitting the form the current page is redisplayed. I have put some print statements in the action function. Also there is a query error is put. None of them are being generated.
Am i doing something wrong here?
The commandButton action property already expects a method expression, so just take the parenthesis out, like this:
<h:commandButton action="#{userBean.register}" value="Update" />
Also, make sure you don't have nested forms when making templates with includes.
I hope it helps.
I have a <p:commandLink> inside a <ui:repeat> in my xhtml page, my bean scope is set to 'View'. I am using JSF2.0 with primefaces 3.4. Here is the code snippet.
<ui:repeat value="#{bean.selectedJob.conversions}" var="conversion">
<p:commandLink styleClass="contextMenuItem"
update=":form:outputParent" immediate="true"
action="#{bean.method()}"
oncomplete="$('#outputFilterContextMenu').hide();">
<h:outputText value="#{conversion.convType}: #{conversion.convNodeName}" />
</ui:repeat>
but command link doesn't invoke the back end method. I have tried it with actionListener instead of action but that doesn't work either.
Any help or suggestion will be highly appreciated.
Thanks
When the commandLink is inside <ui:repeat>, the bean, which action is called, must be SessionScoped.
I have a main jsf page, it contains a link to a popup window.
I want to update a component of the main jsf page. when i close the popup window.
popup.xhtml:
<h:commandButton value="close" onclick="return window.close();"
action="showDevoir.xhtml">
<f:ajax execute="#form" render=":devoirForm" />
</h:commandButton>
main.xhtml
<form id="devoirForm" >
<p:panel id="devoir" />
</form>
When i close the popup, i want to update the panel component of the form with id="devoirForm"
I see that you're using PrimeFaces.
Just use <p:dialog> instead of window.open(). See also the showcase. This creates a <div> element in the very same window, so you would just have instant access to the main form from there.
Add to your main page a JavaScript function that updates said component. Call it from the onunload event from your popup windows.
I am less familiar with the issue of rerendering a component JavaScript; in the worst of the worlds you can add a commandButton that refreshes the component, make it invisible through CSS, and make the JS launch its click event (like in this example)