Ajax not working on a jsf 2.2 simple page - ajax

I have a simple jsf 2.2 page and cant figure out why ajax is not working, i searched the web but couldnt find a solution, i'm only showing the relevant part here... these are inside a multpart/form-data form. Nothing happens, the outputText is not shown on page when i toggle the selectBooleanCheckBox.
<h:selectBooleanCheckbox value="#{worksheetEditBean.sendMail}"><h:outputLabel value="Send Email"/>
<f:ajax event="change" render="mailPnl" execute="#this"/>
</h:selectBooleanCheckbox>
<h:panelGroup id="mailPnl">
<h:outputText rendered="#{worksheetEditBean.sendMail}">Hello</h:outputText>
</h:panelGroup>

Related

Form Autofill is not working with JSF Ajax requests

As soon as I change my submit button to an Ajax request, autofilling of forms won't work anymore.
The following snippet works fine with Chrome and Firefox:
<h:form>
<h:inputText />
<h:commandButton type="submit" value="Submit"></h:commandButton>
</h:form>
For example if I enter "test", then "test" will be proposed the next time I use the field.
If I change the request to Ajax, then autofilling will not work.
<h:form>
<h:inputText />
<h:commandButton type="submit" value="Submit">
<f:ajax render="#form" execute="#form"/>
</h:commandButton>
</h:form>
Do you have any idea why it doesn't work with ajax?

How can I display the reason for <a4j:status> error?

I'm currently debugging an annoying AJAX bug in our web application using JSF2 and RichFaces v4.5.12.Final where I need further information about the reason why an ajax update fails.
We generate rather complex forms with several elements and on some of these forms the following code snippet fails to re-render and sets to error.
<h:selectBooleanCheckbox value="#{myBean.value}">
<a4j:ajax event="valueChange" execute="#form" render="#form,messages" status="minimal" />
</h:selectBooleanCheckbox>
The AJAX status is displayed using the following code:
<a4j:status name="minimal" onstart="$('body').css('cursor', 'progress');" onstop="$('body').css('cursor', 'default');">
<f:facet name="start">
<h:graphicImage name="/3rd-Party/Fugue-Icons/hourglass.png" styleClass="middle" />
</f:facet>
<f:facet name="stop"></f:facet>
<f:facet name="error">
<h:graphicImage name="/3rd-Party/Fugue-Icons/exclamation-red.png" styleClass="middle" />
</f:facet>
</a4j:status>
Is there any way to display the reason why the render fails? Can I access any variable containing some kind of error message?
Debugging shows that the execute is performed and doesn't result in any server side errors. The error happens on client side where the AJAX fails to reload the page content. It doesn't matter if we use render="#all" or anything else... the error occurs on some of our pages. Others with the same <a4j:ajax> work normally.
The error handler is triggered when there is a problem with the server response. RichFaces has <a4j:log> specifically for debugging, it will at least tell you what kind of error it is.

JSF Primefaces mobile confirmation dialog not working

I am trying to add confirmation dialog in a dialog using primefaces mobile. I have tried these examples
<p:dialog id="main">
<h:form>
<p:growl id="messages" />
<p:commandButton value="Delete" onclick="confirmation.show()" type="button"/>
<p:confirmDialog message="Are you sure?" header="Confirmation" severity="alert" widgetVar="confirmation">
<p:commandButton value="Yes" update="messages" oncomplete="confirmation.hide()"
actionListener="#{buttonBean.destroyWorld}" />
<p:commandButton value="Not" onclick="confirmation.hide()" type="button" />
</p:confirmDialog>
</h:form>
</dialog>
When i am rendering the page the confirmation dialog is not rendered as dialog also the command buttons are listed.
When i keep confirm dialog in another form, its not invoking the dialog.
JSF
JavaScript
I cannot get either of them to work. What am I doing wrong?

ViewState lost after AJAX request

I have a very strange error with the following code:
<h:form id="myForm">
<h:panelGroup id="myPanelGroup">
...
<h:commandButton
value="randomtext"
action="#{mybean.action}" tabindex="301"
<f:ajax execute=":myPanelGroup" render=":messages #form"/>
</h:commandButton>
</h:panelGroup>
...
</h:form>
So the problem is that after I click on the button the form (myForm) looses its viewState after render. The strange is that in my dev env it is working, but on an other server it is not. Have I made some common mistake with this kind of execute/render pair settings or what else could cause such problem? I was also wondering that probably the 2 servers have different Mojarra version or something like that.
The messages in the render attribute is an id of a panelgroup in an other form.
The container is a WebLogic server with JSf 2.1.
Any ideas?
Thanks!
So I found out it is a common JSF issue that can be solved with the following library:
http://showcase.omnifaces.org/scripts/FixViewState
More info:
http://balusc.blogspot.hu/2011/09/communication-in-jsf-20.html#AjaxRenderingOfContentWhichContainsAnotherForm

JSF f:ajax prompt before any action

How I can show dialog before any f:ajax action.
I have code as following:
<h:commandButton value="Create Project" styleClass="greyishBtn submitForm" action="#{projectController.delete}">
<f:ajax execute="#form" onevent="function(data) {createProjectEventHandler(data);}" render=":tblProject txtNewProjectName txtNewProjectStartDate taNewProjectDesc"/>
</h:commandButton>
This code works fine, but I need a confirm dialog before call delete action, I tried onevent, but it only have begin, success and complete events, what I need is confirm dialog before 'begin' event.
Any idea?
Thanks in advance.
Before the ajax even starts you can cancel it (ajax) or the submit action itself by using onclick="return false" in the <h:commandButton itself...
So the simplest way it to use js confirm("Delete?") dialog with onclick
<h:commandButton onclick="return confirm('Delete?');" value="Create Project" styleClass="greyishBtn submitForm" action="#{projectController.delete}">
<f:ajax execute="#form" onevent="function(data) {createProjectEventHandler(data);}" render=":tblProject txtNewProjectName txtNewProjectStartDate taNewProjectDesc"/>
</h:commandButton>
A more advanced way could be found here jQuery UI confirm dialog not returns true/false it uses jQuery dialog with JSF

Resources