JSF f:ajax prompt before any action - ajax

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

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?

Ajax not working on a jsf 2.2 simple page

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>

Ajax has been executed when page is reload but just have to be executed with click event

I have a problem that I did an ajax to be executed just when the user click in a link, and this is been executed too every time that the page is reloaded
follow the code:
<h:commandLink id="botaoFecharModal" class="btn btn-small btn-primary" >
<f:ajax onevent="fecha" event="click" listener="#{itemController.atualizaRegraNegocio()}" render=":Objetoform:pgTabela"/>
<i class="icon-ok"></i>
Concluir
</h:commandLink>
Somebody knows what i have to do for this stop?

Trigger HTML5 constraint validation before submitting a form using ajax

I have the following code snippet and the standard client side html validation is not triggerd. How can I trigger the standard validation and get the action called if valid.
<h:form>
<h:inputText type="text" value="#{myBean.value}">
<f:passThroughAttribute name="required" value="required" />
</h:inputText>
<h:commandButton value="submit" type="submit" action="#{myBean.save}">
<f:ajax execute="#form" render="#form" />
</h:commandButton>
</h:from>
Without the ajax the client side validation will be triggered and the form will not be send if the input is empty.
How can I reach this with ajax?
JSF ajax engine does not check HTML5's form.checkValidity() before proceeding the request. Essentially, you need to do that job yourself in the onclick attribute of the command button. If it returns false, then it will block the ajax action.
Please note that you should never rely on only client side validation, because that's fully controllable by the enduser. I strongly recommend to add server side validation as well. When you add ajax, you can easily make use of server side validation with the same user experience as client side validation.
See also:
JSF2 Validation Clientside or Serverside?

How to prevent reload of page in Richfaces on action/event?

I am using JSF2.0 and RichFaces 4.0.1 Final. I want to prevent the reload of page on occurence of event.
My use case is: There is a Command button with hidden style. I need to invoke the event attached to it in certain case from Javascript.
Problem: Though I am able to invoke the hidden button, the issue is, the moment it gets invoked, the page is getting reloaded. I want to prevent this reload.
Just use ajax:
<h:commandButton id="foo" action="#{bean.foo}" styleClass="hide">
<f:ajax />
</h:commandButton>
Or, since you're already using RichFaces:
<a4j:commandButton id="foo" action="#{bean.foo}" styleClass="hide" />

Resources