Oncomplete of Primefaces component fileUpload is never called - jsf

I have a form upload component on my page and want to make more actions in JavaScript after file upload is complete and page updated.
I put simple log statement to test for "oncomplete" execution, but it never happens.
File is successfully uploaded and other parts of page updated, but no "oncomplete" actions performed.
Here is my component:
<p:fileUpload id="objectUpload1"
fileUploadListener="#{importBackingBean.handleFileUpload}"
mode="advanced" dragDropSupport="true"
invalidFileMessage="Недопустимый тип файла"
invalidSizeMessage="Размер файла превышает 5 МВ"
cancelLabel="#{msg['stop_LABEL']}"
uploadLabel="#{msg['Upload_LABEL']}"
label="#{msg['Choose_LABEL']}" update="results objects_Data"
sizeLimit="5000000" allowTypes="/(\.|\/)(xlsx|xls)$/"
oncomplete="load();" />
And my Javascript:
<script type="text/javascript">
function load() {
console.log('File Uploaded!');
$("button[id*='load']").click();
}
</script>
Button:
<p:commandButton value="Загрузить полисы"
oncomplete="#{importModelBean.needToLoadMore ? 'load();' :'none();'}"
id="load"
action="#{importBackingBean.loadOneRow(importModelBean.current)}"
process="#this" update="mainViewForm:objects_Data" />
When I click the button manually it works just fine. But not getting clicked with oncomplete of filepload.

Using the codes given, I have reproduced this scenario. Although $("button[id*='load']").click(); has been invoked correctly, no log is showing. I am guessing that the button with an id load is set to ajax=”false”. If this is true, then I think that the message was logged the moment console.log('File Uploaded!'); is invoked but was cleared since the page is updated after the load button process. Do you need the log for something? If not, just remove console.log('File Uploaded!'); code and it should work just fine.
EDIT:
I misunderstood you. I thought that your concern was that the message was not logged in the console.
I have tested your codes on two projects (running on two different computers) and I can’t reproduce your problem.
Project 1:
Primefaces 6.0
JSF 2.0
WAS 8.5
IE 11
Project 2:
Primefaces 5.x
JSF 2.0
Glassfish 4.1
Google Chrome
I even tried oncomplete=”alert(‘hello!’)” and it worked fine.
I think that the problem is somewhere else.
For the mean time, can you try the following codes and see if it works:
<p:fileUpload id="objectUpload1"
fileUploadListener="#{importBackingBean.handleFileUpload}"
mode="advanced" dragDropSupport="true"
invalidFileMessage="Недопустимый тип файла"
invalidSizeMessage="Размер файла превышает 5 МВ"
cancelLabel="#{msg['stop_LABEL']}"
uploadLabel="#{msg['Upload_LABEL']}"
label="#{msg['Choose_LABEL']}" update="results objects_Data"
sizeLimit="5000000" allowTypes="/(\.|\/)(xlsx|xls)$/"
oncomplete="rc()" />
<p:remoteCommand name="rc"
oncomplete="#{importModelBean.needToLoadMore ? 'load();' :'none();'}"
action="#{importBackingBean.loadOneRow(importModelBean.current)}"
process="#this" update="mainViewForm:objects_Data" />
For more information about p:remoteCommand, please refer to primefaces showcase RemoteCommand.

Related

Widget for var 'FileUpload' not available

Primefaces 7.0, JSF 2.1.19
I am trying to replace richfaces 3.3.3 with primefaces 7.0 (and upgrade JSF to 2.1) and got a special behaviour from the fileUpload widget: When I first render the page it works without problems (no fileupload done, just render it), then I navigate again to the same page it is broken:
The fileupload component:
<p:fileUpload disabled="#{antragAttachments.fileUploadDisabled}" id="attachmentUpload" widgetVar="attachmentUpload" binding="#{antragAttachments.fileUpload}"
fileUploadListener="#{antragAttachments.fileUploadListener}" label="Durchsuchen..." uploadLabel="Datei anhängen" cancelLabel="Abbrechen" invalidFileMessage="test typ"
mode="advanced" fileLimit="1" sizeLimit="15728640" invalidSizeMessage="Der Dateianhang ist zu groß! Die maximale Größe beträgt 15MB!" previewWidth="1"
oncomplete="uploadComplete();" auto="true">
</p:fileUpload>
This is the (menu) component the navigate again to the xthtml:
<ui:repeat value="#{name}" var="item" >
<div id="menuOP" class="ebene#{item.shifting} #{item.selected ? 'divselected' : 'divnotselected'} #{item.spriteClass}">
<p:commandLink immediate="#{item.immediate}" value="#{item.label}" rendered="#{item.enabled}" action="#{item.navigate}"
styleClass="#{item.selected ? 'selected' : 'notselected'}" oncomplete="#{item.oncomplete}"/>
<h:outputText id="menuNoLinkText" rendered="#{!item.enabled}" styleClass="disabled" value="#{item.label}" />
</div>
</ui:repeat>
I tried to remove the immediate, set the type to "submit", use h:commandLink (without the oncomplete of course) just to see if I can get this running somehow. Does not work.
I also looked at the Primefaces fileupload introduction from balusC, but my problem is not the fileupload, it is the second rendering. There is also a Primefaces forum entry about something similar, but the trick von melloware did not work also.
What I do not understand, by the first click on the menu the rendering works fine and after every click on the menu-commandlink the browser console tells me that the widget is not available.
I found examples with similar problems, but there is most of the time a javascript call of the widget like PF('attachmentUpload').doSomething(), but this is not the case here.
EDIT:
I found out that when I first click on the commandlink the fileupload.js is loaded:
By the second click this is not the case anymore:
I also found a thread with the same problem: <p:layout> and <p:fileUpload> not working on page refresh, but there the only solution seems to be to take the css and js for fileupload and add it manualy to as resource... which is a little creepy...

Is there a bean event for cancel button in PrimeFaces upload component?

We are using the primefaces for file upload handling in our web application. The upload component becomes visible, upon some event on the page (button pressed). We would like to be able to catch the event when CANCEL button is pressed, in order to use it to hide the upload component back. Any advise? Javascript or CSS would not do the work, as we also need to do some server logic for this.
Code:
<h:form id="uploadFileForm" enctype="multipart/form-data" rendered="#{filesMenu.enableFileUpload}">
<p:fileUpload style="font-size:12px;"
fileUploadListener="#{filesMenu.handleFileUpload}"
mode="advanced" dragDropSupport="false"
update="msgUpload , :formFilesListId , :formFilesListId:dataTableSimpleFilesId, :createNewFileFromSelectionForm"
sizeLimit="100000" fileLimit="1" allowTypes="/(\.|\/)(cfg)$/" />
<p:growl id="msgUpload" showDetail="true" />
</h:form>
Catch the cancel-button click with Javascript/JQuery. On the one hand you can invoke an hidden button on your jsf page which triggers the server logic. On the other hand you can trigger the following component from Javascript :
<p:remoteCommand name="functionName" action="#{yourBean.yourMethod}">
Catch the cancel button :
$(document).ready(function() {
$(".ui-fileUpload").on("click",".cancel",function() {
//Approach remoteCommand
functionName();
//Approach hidden button
$(".jQueryTohiddenButtonClass").click();
}
Probably you have to customize the jQuery path, so they fit to your demands.
Another option is to hide the cancel-button completely with
.ui-fileupload-cancel {
display: none;
}
and create your own button instead which calls an action/actionListener and hides the dialog.
I went even further and hid all 3 buttons and created my own save button too, which called PF('fileupload_widgetvar').upload(); in oncomplete. Then you'd need to have some javascript to make the page wait until the upload is finished, as the ajax is asynchonous so you can't redirect/hide the dialog right away. Let me know if you want that code.

Primefaces Editor and ajax submission on blur

I have a Primefaces editor on my page and I want to submit the content to the server when the user focuses on a different component on the page.
<p:editor value="#{}">
<p:ajax />
</p:editor>
This works find for example with p:inputText, but with the editor I get this error:
Unable to attach <p:ajax> to non-ClientBehaviorHolder parent
I also tried adding the onchange attribute to the p:editor and calling a remoteCommand to submit the content, like this:
<p:editor widgetVar="documentation" onchange="submitDocumentation" />
<p:remoteCommand name="submitDocumentation" process="#parent" update="#none" />
That works, but on every single keystroke. I only want to submit the content of the editor when the focus is lost.
Is it possible to use Ajax to submit the content of a Primefaces Editor when focus is lost?
Using Tomcat 7, Mojarra and Primefaces 4.0
You can do it in the next way.
$(document).ready(function() {
//documentation is the editor widgetVar
PF('documentation').jq.find("iframe").contents().find('body').blur(function(){
submitDocumentation();//remoteCommand
});
});

Primefaces fileupload ajax (growl)

i have the file upload using primefaces, in advanced mode,
<p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload(event)}"
mode="advanced"
update="messages"
sizeLimit="100000000"
allowTypes="/(\.|\/)(gif|jpe?g|png|doc|docx|txt|pdf)$/"
auto="true"/>
<p:growl id="messages" showDetail="true"/>
But i want to add a few nice finishing touches, like i have seen examples that use growl, that pops up a message saying success etc once completed, but am unsure on how to do this with glassfish, and do it on completion of the file being uploaded
Thanks
Solved the issue, my bean wasn't configured correctly thats all :)
EDIT :
Looked into the glassfish console and saw it was not calling the event caller, so it was skipping this enter section, i just simply changed the method call in the xhtml, and make sure the bean was correct, if anyone wants to see the bean just post a comment and ill add it :)

Issue with primefaces , Specially p:commandButton

I developed a JSF 2 application using RichFaces first and then migrated to Primefaces recently.
All things are working fine except:
When clicking on a button and calling update="id1, id2, etc", it does not update my page contents.
<p:commandButton value="Logout" action="#{profile.logout}" /> does not work, in logout method I simply clear session and return to login page, but it stays on the same page.
I am using Tomcat 6.0.32 on Windows 7 with 4GB RAM. I m using PrimeFaces 2.2, the latest Stable build.
When clicking on a button and calling update="id1, id2, etc", it does not update my page contents.
You have to provide more context before we can give an answer on that. My first guesses would be that you have to remove those commas (and only separate by spaces like in standard JSF2 and RF4). My second guess would be that those components are simply not resolveable in the current component and NamingContainer hierarchy. My third guess would be that the ajax request didn't return a valid ajax response (use Firebug to check it).
<p:commandButton value="Logout" action="#{profile.logout}" /> does not work, in logout method I simply clear session and return to login page, but it stays on the same page.
The <p:commandButton> sends by default an ajax request. If you want to navigate to a different view as response on an ajax request, then you have to send a redirect. You can do this among others by adding the faces-redirect=true parameter to the outcome:
return "login?faces-redirect=true";
Or, alternatively, just turn off ajax on the button:
<p:commandButton ... ajax="false" />
Or, use the standard <h:commandButton> instead:
<h:commandButton ... />

Resources