Uploading files via AJAX using p:fileUpload with mode="advanced" - ajax

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.

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?

Session get lost even if I am interacting on page

I'm working with primefaces 3.4.2 Javax.faces 2.1.9
My web.xml
<session-config>
<session-timeout>45</session-timeout>
</session-config>
<p:idleMonitor id="idMonitorSession" timeout="2400000"
onidle="dlgMensajeSessionExp.show()" />
<p:dialog header="Sesion Ended" resizable="false"
widgetVar="dlgMensajeSessionExp" width="300" height="120"
modal="true" closable="false" appendToBody="true">
<center>
<h:outputText value="Session Ended" />
<h:form id="sessionForm">
<h:commandLink actionListener="#{user.exit()}">
<h:graphicImage style="border:0px" value="/resources/images/login.png"
width="80px" />
</h:commandLink>
</h:form>
</center>
</p:dialog>
However session get lost even if i am working in the pages, do you have any idea why is this happening,
Web Server is Websphere 7.0.0.17
Interacting with the page in such a way that the server isn't invoked via ajax or a complete form post doesn't reset the timeout against the session server side. Using ajax events for the idleMonitor should do the trick.
<p:idleMonitor id="idMonitorSession" timeout="2400000"
onidle="dlgMensajeSessionExp.show()">
<p:ajax event="active"/>
</p:idleMonitor>
Edit: I noticed the "active" event doesn't fire when the mouse is moved, the user will be required to interact with the page enough to trigger this event. If it is critical to keep the server synced with the page, ajax invocations will be required more often than this event will create. You don't have to necessarily invoke a noop action on the server side, setting the event type is enough.
Another possibility is to use ajax events when the type of interactions occur that indicate your users are actively using the page. For instance, typing a long message in a text area or filtering a large data table.
<p:ajax event="filter" listener="#{bean.activeListener}"/>
Either way, the goal is to keep the server aware that the user is indeed active without flooding the server with unneeded ajax events.

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.

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>

Using <h:form> breaks my JSF page until I make a ajax request

I am using PrimeFaces and the newest jsf stuff.
<p:dataGrid var="terms" value="#{coursePlanSandbox.preProcessedTerms}" columns="4" rows="20">
<h:form style="margin:0px;">
<div class="list-widget classDrop">
<div class="list-head">
<h3>#{coursePlanSandbox.termName(terms.term)}</h3>
<div class="list-meta">
#{terms.term.startYear}
<span class="pull-right" style="margin-top:-3px;">
#{terms.fToi(terms.scheduledUnits)} /
<h:inputText styleClass="inputMaxUnits" value="#{terms.firstSession.maxUnits}" >
<p:ajax event="change" process="#this" />
</h:inputText>
</span>
</div>
</div>
</div>
</h:form>
</p:dataGrid>
This is a snippet of my Facelets file. What happens is if I do a fresh run of the page, right click the Facelets file in NetBeans and click 'Run File' which refreshes the server I guess, the page stops loading after <h:inputText> and nothing else loads after that point. Even when I refresh the page, it stops loading after that point. If I enter a value in the <h:inputText> and it sends an ajax request to the server, if I then click refresh, the page loads everything else after that. Is it a bug with the server or am I doing something wrong?
I don't understand why using Run File... normally you run the JSF Project (or Debug it) and you don't need to run anything else when doing changes inside xhtml files nor java files (except when you are adding / modifying classes and functions prototypes). Run file is useful to run a class that contains main().
Found out what it was, I was calling an object in my controller before it was made, breaking the page. And once the ajax call when thru, it called the class constructor and built the object. So thats why every refresh after that it worked just fine.

Resources