The following code appears in a ui:composition page and uses a template, the template inserts this page using ui:insert.
<p:commandButton id="basic" value="Contact #{viewProfileView.profile.credentials.username}" onclick="PF('dlg1').show();" type="button" />
<h:form id="createMail">
<p:dialog id="createMailDialog" header="Contact #{viewProfileView.profile.credentials.username}" widgetVar="dlg1" modal="true" draggable="false">
<p:growl id="growl"/>
<p:inputTextarea value="#{viewProfileView.emailBody}"
rows="5" cols="80" maxlength="399"
counter="charsLeft"
counterTemplate=" {0} chars remaining."
autoResize="false" />
<h:outputText id="charsLeft" />
<p:commandButton id="sendMailButton" value="Send"
action="#{viewProfileView.sendMail}"
update="growl"
oncomplete="PF('dlg1').hide();"/>
</p:dialog>
</h:form>
I'm using latest JSF and Primefaces 5.1.
Everything works fine except for the oncomplete of the 'sendMailButton' commandButton fails to be called to close the dialog. I know this code works as I have put it in a page of its own and seen it working, it just doesnt want to work as part of a ui:composition with template.
Help would be most appreciated as i've been searching for an answer without luck.
UPDATE: If I change 'oncomplete' to 'onsuccess' it works, but only once, however this does not resolve my issue.
Many thanks.
It appears that it was the template that was causing problems. Working now.
Related
I am wrirting a captcha code for my jsf project. I have done almost everything but the problem is the refreshing og the image. I'd like to do it with ajax so that when I click the image, it be replaced by new one. But when I click it the image doesn't get updated. But it is updated after reloading the page.
<h:form>
<h:commandLink>
<h:graphicImage value="/captcha/test.png"
style="width:35mm;height:2cm;" />
<f:ajax render="#all" listener="#{captcha.recaptcha()}"></f:ajax>
</h:commandLink>
</h:form>
every time I click the image , it is changed on disk but not updated in the html page.
Thanx for any useful responses !
Try the following code using execute and render tags
<h:form>
<h:commandLink>
<h:graphicImage value="/captcha/test.png" style="width:35mm;height:2cm;" />
<f:ajax render="#form" execute="#form" listener="#{captcha.recaptcha()}" />
</h:commandLink>
</h:form>
You have need to use update attribute.
take a look-
<h:form id="form1">
<h:commandLink>
<h:graphicImage value="/captcha/test.png"
style="width:35mm;height:2cm;" id="img1"/>
<f:ajax render="#all" listener="#{captcha.recaptcha()}" update=":form1:img1"></f:ajax>
</h:commandLink>
</h:form>
Hope this will work
I don't know why Ajax is not working in my JSF files.Even I have a latest Mojarra which is 3.2.13 in my GlassFish. Here is my code
<h:head></h:head>
<h:body>
<h:panelGroup id="panel" rendered="#{chartBean.showCharts}">
<p:barChart id="basic" value="#{chartBean.categoryModel}"
legendPosition="ne" title="Basic Bar Chart" min="0" max="200"
style="height:300px" />
</h:panelGroup>
<h:commandButton value="Display Chart" action="#{chartBean.createCategoryModel}">
<f:ajax render="panel"/>
</h:commandButton>
</h:body>
Now when I run this code, button doesn't work.
Another thing, if I change my code like remove panel and just render on barchart like
<f:ajax render="basic"/> and placed it in <form>
then it throws NullPointerException. Because it render the chart and expect value from chartBean.categoryModel. Now AFAIK it should not be rendered because of ajax.
I am unable to understand ajax behavior in JSF. I also tried <f:ajax execute="#form" render="basic"> but it didn't work too. How is this caused and how can I solve it?
You cannot re-render a component that is not there on your page at the time you click the ajax button.
A simple solution would be to move the rendered attribute from the h:panelGroup to the p:barChart. Then the panelGroup will always be rendered and JSF finds it during your ajax request.
<h:panelGroup id="panel">
<p:barChart rendered="#{chartBean.showCharts}"
id="basic" value="#{chartBean.categoryModel}"
legendPosition="ne" title="Basic Bar Chart" min="0" max="200"
style="height:300px" />
</h:panelGroup>
<h:commandButton value="Display Chart" action="#{chartBean.createCategoryModel}">
<f:ajax render="panel"/>
</h:commandButton>
I have a JSF search command button and a tomahawk dataTable that showing the result from a search. When clicking on the command button, the dataTable should output the search result. Anyway, since I use the JSF Ajax, the dataTable doesn't show. I am just wondering whether JSF Ajax cause the problem?
Here is the problematic code that cause the table now render:
<h:commandButton id="search" value="#{msg.Label_Search}" action="#{theBean.doSearch}">
<f:ajax render="searchStatus" execute="#form" />
</h:commandButton>
<h:outputText id="searchStatus" value="Loading data now..." rendered="#{theBean.searchingNow}" />
<h:panelGroup id="searchResultTable">
<t:dataTable ... />
</h:panelGroup>
*Take note on this. If the ajax code were removed. It is working fine.
You're only updating the searchStatus, not the searchResultTable when the ajax request completes. So the enduser will indeed never see a visual change in the HTML representation of the searchResultTable.
Fix the <f:ajax render> accordingly so that the searchResultTable is also really updated:
<f:ajax render="searchStatus searchResultTable" execute="#form" />
I'm using jQuery's .load function to load one JSF page into another.
This works really well until the loaded JSF page uses some AJAX functionality. When this happens, the parent JSF page's AJAX stops working. In fact, after the two pages are combined whichever page has its AJAX called next is the one that continues to work. The other page stops working. If I use the parent page first, the child breaks. If I use the child first, the parent breaks.
Am I doing something wrong? I'm guessing JSF isn't designed for this sort of behaviour and that's fine but then how do I go about doing what I want?
Basically, we have a report page. When the user clicks the link to a report we would like the report to load dynamically into the existing page. That way, the user doesn't experience a page refresh. It's a pretty slick behaviour BUT obviously isn't ideal due to the pages breaking.
I suppose I could do this with a page that contains every report in an outputpanel and then determine which one is rendered based on a value in the backing bean but I can see lots of occasions where I'd like to be able to "inject" one page into another (for dynamic dialogs for instance) and it would suck to have to keep everything in one giant template.
Has anyone else come across this sort of problem? How did you solve it?
Do not use jQuery.load(). It does not take JSF view state into account at all, so all forms will fail to work. Rather make use of <f:ajax> and rendered attribute instead. Here's a basic example:
<h:form id="list">
<h:dataTable value="#{bean.reports}" var="report">
<h:column>#{report.name}</h:column>
<h:column>
<h:commandLink value="Edit" action="#{bean.edit(report)}">
<f:ajax render=":edit" />
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
<h:form id="edit">
<h:panelGrid columns="3" rendered="#{not empty bean.report}">
<h:outputLabel for="name" value="Name" />
<h:inputText id="name" value="#{bean.report.name}" required="true" />
<h:message for="name" />
...
<h:panelGroup />
<h:commandButton value="save" action="#{bean.save}" />
<h:messages globalOnly="true" layout="table" />
</h:panelGrid>
</h:form>
You can if necessary split off the content into an <ui:include>.
I need to use the a4j:commandButton instead of h:commandButton because of its reRender option.
When I'm using h:commandButton, it works fine (but off course without reRender):
<h:commandButton id="save" action="#{bean.save}" value="#{conf.buttonSave}"/>
And the same thing using doesn't (action isn't started even withour reRender option):
<a4j:commandButton id="save" action="#{bean.save}" value="#{conf.buttonSave}"/>
I've also tried:
<h:commandButton id="save" action="#{bean.save}" value="#{conf.buttonSave}">
<a4j:ajax event="click" reRender="table" />
</h:commandButton>
But if I add a4j:ajax it the same problem as a4j:commandButton, action is not started.
Could you help me?
You tagged this JSF 2.0. So you're using JSF 2.0. Just use the JSF 2.0 builtin <f:ajax> tag.
<h:commandButton id="save" action="#{bean.save}" value="#{conf.buttonSave}">
<f:ajax render="table" />
</h:commandButton>
Note that <h:dataTable id="table"> must be within the same <h:form> the above way. Otherwise you need render=":table" instead. Also note that you must have a <h:head> instead of <head> in the template in order to get all necessary JavaScripts auto-included.