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?
Related
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?
I have this piece of code that upload files:
<p:dialog id="addFileDialog"
header="#{text['tasksbacking.attach.addFile']}"
widgetVar="addfile"
height="500"
width="500"
closeOnEscape="true"
resizable="false"
draggable="false"
fitViewport="true"
modal="true"
appendTo="#(body)">
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{attachmentsComponent.handleFileUpload}"
mode="advanced"
multiple="true"
dragDropSupport="true"
allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|doc|docx|txt)$/"
label="#{text['tasksbacking.addFile.choose']}"
uploadLabel="#{text['tasksbacking.addFile.upload']}"
cancelLabel="#{text['tasksbacking.addFile.cancel']}"/>
</h:form>
<p:ajax event="close"
update=":#{cc.clientId}:addFileDialog,:#{cc.clientId}:formAttachForm:attachTree,:#{cc.clientId}:formAttachForm:msgTreeAction,:#{cc.clientId}:attachContainer" listener="#{attachmentsComponent.onCloseUpload}"/>
</p:dialog>
With this code, I can upload files when I close the dialog. But I cannot execute another AJAX action, without refreshing the page. The other actions execute well when I don't upload files as the first action.
What could be the problem to execute the forward actions without refreshing the page? The enctype of the form could be the problem?
I had the same problem with enctype="multipart/form-data" form and i see this question:
File upload doesn't work with AJAX in PrimeFaces 4.0/JSF 2.2.x - javax.servlet.ServletException: The request content-type is not a multipart/form-data
And after i use this answers:
https://stackoverflow.com/a/19381134/3703397
https://stackoverflow.com/a/19752138/3703397
Finally, it worked!
Basically the re-render/customization of the component p:fileUpload works fine and this is one primefaces bug.
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>
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?
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