widgetVar cannot be used in p:fileUpload

Question

I want to remove the error message when choosing a wrong type of file. I followed the link http://forum.primefaces.org/viewtopic.php?f=3&t=23853 .

<p:fileUpload fileUploadListener="#{userProfileUpdateController.upload}"         
    widgetVar="fileuplaodWgt"                     
    allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
    description="Select Images"
    update="userPhoto"
    mode="advanced"/>

and I import <h:outputScript name="library.js" library="script"></h:outputScript>

In library.js

$(document).ready(function(){
   alert(fileuplaodWgt);
   fileuplaodWgt.buttonBar.find("button.cancel").bind("click", function(e){
   clearInvalidFileMsg();
    });
});

function clearInvalidFileMsg(){
    fileuplaodWgt.uploadContent.find("tr.ui-state-error").remove();
 }

After writing above, file upload is not shown in my page. When I trace the my library.js file, I found fileuplaodWgt ReferenceError: fileuplaodWgt is not defined. I tried in mozilla and chrome. None of them shows my file upload. Can you help me what I am wrong???

On the link what you posted `widgetVar` is `fileuplaod_wgt` but in this code `fileuplaodWgt`. Maybe this is the problem? — Akos K, Jan 09 '13 at 09:59
No..I first tried with fileuplaod_wgt. But it no works. So I changed to fileuplaodWgt. — swemon, Jan 09 '13 at 10:00
it has nothing to do with the naming except when the `fileupload` `id` is the same as `widgetVar`, that may conflict. I would do a quick search/replace for `fileuplaod_wgt` maybe you left something unchanged. I would also try to reference fileuplaodWgt through `window.fileuplaodWgt`. — Akos K, Jan 09 '13 at 10:06

score 1 · Accepted Answer · edited May 23 '17 at 11:48

PrimeFaces initializes widget vars on DOM ready as well by $(function()). The <script> containing the command is rendered directly after the component. So, if your $(document).ready() is invoked before the widget var one, then it won't find the widget var because it's initialized later. You need to ensure that your $(document).ready() is invoked after the component is rendered. One of the ways is relocating the script to the end of HTML <body> by target="body".

<h:outputScript name="library.js" library="script" target="body" />

This way the script is loaded and initialized when the end of document is reached, thus after all widget var initializations.

Another way is to use $(window).load() instead of $(document).ready(), but this is clumsy and potentially slower as it's only invoked when all images referenced in the document are loaded.

Unrelated to the concrete problem, the way you're using the resource library is not right. Please carefully read What is the JSF resource library for and how should it be used? and just use

<h:outputScript name="script/library.js" target="body" />

You've by the way also a disturbing typo in the widget var name not further related to the problem. It's upload, not uplaod.

widgetVar cannot be used in p:fileUpload

1 Answers1