jsf primefaces fileupload on submit - ajax

Does anyone know how I can upload multiple files with primefaces (http://www.primefaces.org/showcase/ui/fileUploadMultiple.jsf) when I click my own submit button? The upload-button there should not be visible, because I want to chose the upload-time on my own.
I have multiple pm-fileupload components in my document, so I want to upload them all together.
is there a way? Or must I use the old browser-upload?

Use multiple <p:fileUpload mode="simple"> generated by a <ui:repeat> or <h:dataTable>.
The <p:fileUpload mode="advanced"> indeed isn't suitable for this requirement, or you must turn on automatic immediate upload on select by adding auto="true".

Related

Why my PrimeFaces's controls do not work after migration?

Just migrated from jboss 7.1 to wildfly 16 and PrimeFaces 4.0 to 6.2.
As I know PrimeFaces uses ajax with its elements such p:commandLink, p:commandButton, etc.
I have:
<p:commandLink action="#{exampleBean.redirrectSomewhere}">
labelName
</p:commandLink>
After tapping at the commandLink nothing is happening, but if I add ajax='false' as an attribute, it is going to work fine.
Is there some way to get redirected using ajax?
Ask for extra information.
This is a known issue (at least to me). Use process="#this" to make sure that the ajax updates current component instead of the whole view. You can then remove ajax="false".

Which event is fired when completeMethod is executed on inputTextArea in PrimeFaces?

I need to use InputTextarea PrimeFaces component, wich allow use autocomplete mechanism between text. All works great, except for p:statusAjax, when I'm typing, my loading var animation blocks screen.
I resolve this for AutoComplete PrimeFaces component by adding next lines between p:autoComplete:
<p:ajax event="query" global="false"/>
But when I try put this line between p:inputTextArea JSF shows error:
javax.servlet.ServletException: /notificaciones/edit.xhtml #162,50 Event:query is not supported.
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:606)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:303)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:208)...
I've read PrimeFaces User Guide but for inputTextArea component there is no Ajax Behavior Section.
So, how can I know which event is firing when autocomplete method executed on p:inputTextArea
Most of the time, the documentation is up-to-date so most likely there is no ajax event. But to be sure, you can always check the javascript source and/or the java source of the component (the source is open and freely accessible).
You can always try without an event name to see if ajax is supported at all since all (most?) components have a default event.
I'm in a good mood and A quick check for you in the java source and the forms.js javascript source of 6.1 (which contains the js for this component and which is split in its own forms.inputtextarea.js in the 6.1.3 Elite and upcoming 6.2 release) does not show any ajax events being used, so I think you are out of luck on this and need to file an enhancement request in github

ajax behaviour in jsf 1.2

I have a selectonlistbox and I want to reload a panelgrid everytime the selectbox selection is made/changed. I am try to use just jsf 1.2.
I know it can be done easily using a4j or faces 2, but if anyone knows any good way to achieve this in jsf 1.2, I would really appreciate it.
A simple example would help a lot too.
Thanks
You basically need to create a custom Ajax aware ViewHandler and a custom XML ResponseWriter and custom tags which generates the desired JavaScript code to perform the XMLHttpRequest works and HTML DOM manipulation. This is also what most of those 3rd party JSF 1.x component libraries have done. They are all open source, so you could just take a peek in its source code to learn-by-example how they did it. It's for a starter after all however not a trivial job as it requires a solid knowledge of how exactly HTTP, HTML DOM, JavaScript and XMLHttpRequest works. A little mistake is quickly made and it would for a starter take ages to find and really understand it.
Your best bet is really either adopting an ajax capable component library for JSF 1.2 (e.g. RichFaces 3.x which includes Ajax4jsf), or just migrating to JSF 2.0 (JSF 1.2 is over 6 years old already and JSF 2.0 was introduced almost 3 years ago already; JSF 1.x is basically history).
This particular functional requirement can however also be done without ajax, albeit somewhat clumsy, certainly if form validation plays a role. Here's a basic kickoff example, it's a matter of just instructing JavaScript to submit the parent form on change of the dropdown list:
<h:form>
<h:selectOneMenu value="#{bean.selected}" onchange="this.form.submit()">
<f:selectItem itemValue="one" />
<f:selectItem itemValue="two" />
<f:selectItem itemValue="three" />
</h:selectOneMenu>
<h:panelGroup rendered="#{bean.selected == 'one'}">
One was selected.
</h:panelGroup>
<h:panelGroup rendered="#{bean.selected == 'two'}">
Two was selected.
</h:panelGroup>
<h:panelGroup rendered="#{bean.selected == 'three'}">
Trree was selected.
</h:panelGroup>
</h:form>
This will submit the whole form synchronously on change of the dropdown list, as if you pressed a submit button. However, as said, if you're performing validation elsewhere in the same form, you'd have to bring in quite some hacks with immediate="true" and valueChangeListener to prevent validation of all other form elements. See also Populate child menus for some detailed examples.
A completely different alternative is to just render everything to the HTML response and hide it using CSS display:none and then toggle the display using JavaScript element.style.display in some JS function which is referenced in onchange attribute.
I think better option is migrate to JSF 2. If you want to do it with JSF 1.2, use some JS libraries like JQuery or prototype and call your JS function on the event and call AJAX updater with the URL to the template page with panel grid and the logic (eg: /mypanaelGrid.jsf).

PrimeFaces Use FileDownload Inside Form

I'm using PrimeFaces as the web technology in my project. I have a registration form, by that the user registers himself. In that form, the user can also attach some documents. There is no problem so far. But when the user filled the form and attached some documents, the user can check the attachment by downloading them. To provide downloading the files, I used fileDownload with commandButton.
It works fine, but the problem is that when the use wants to download the attached files, the form is validated! So if any field in the form is not validated, the user can't download any file!
I want to provide the opportunity for the user, so that he can first attach the document and check them before filling the form's fields.
I'm very appreciated it if anybody can help me.
use
immediate="true"
as the attribute for the commandButton, inside that you are using fileDownload.
For more information about immediate look here.

ajaxified file upload in jsf

I want to do a file upload without posting an entire form. The file upload works fine, but the whole form is submitted. This works fine when validation is correct. But when p.e. a required field is empty, the upload does not work and a error message is returned (required field missing)
So i tried to ajax the file upload (ajax=true). But then the upload does nothing.
I tried a work around bu putting the file upload and other fields in different forms. This works, but the result is that data you changed in the other fields is disregarded when doing the file upload.
Any suggestions?
Here is my code I use:
<t:inputFileUpload id="fileupload" value="#{prospectDetail.upFile}" size="50" />
<h:outputLabel for="description" value="#{msg.prospectdetail_description}"/>
<mw:inputText id="description" size="40" value="#{prospectDetail.fileDescription}" />
<p:commandButton styleClass="button" value="#{msg.common_upload}" action="#{prospectDetail.upload}" ajax="false" process="#form" onbegin="busyPopup.show()" oncomplete="busyPopup.hide();"/>
It is not possible to upload files by first version of XMLHttpRequest (which is the core Ajax request controller object in JavaScript). The second version of XMLHttpRequest supports it, but this is not implemented by <p:commandButton> (and has currently low browser support).
As you seem to be using PrimeFaces already, why don't you just use its own <p:fileUpload> component? The single upload or even the auto upload examples should do it for you (don't forget to remove the MyFaces extensions filter from the web.xml after adding the PrimeFaces' file upload filter!). The PrimeFaces' <p:fileUpload> will automatically utilize XHR2 file upload whenever available.
I tried a work around bu putting the file upload and other fields in different forms. This works, but the result is that data you changed in the other fields is disregarded when doing the file upload.
If you put the bean in the view scope instead of the request scope and return null or void from action methods, then this should work.

Resources