AJAX file upload error in JSF/PrimeFaces : Cannot read property 'debug' of undefined

2
votes

I have 2 forms one of them uploadForm which upload files and do some actions. After upload, I get an error on the console, when I submit save button:

  1. Uncaught TypeError: Cannot read property 'length' of null
  2. jsf.js:578 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/. (program):1
  3. Uncaught TypeError: Cannot read property 'debug' of undefined

I found related topics on this issue but still cant solve this. I didn't work with upload so i confuse here. All I need is update tables form on each save button invoke.

<h:form id="uploadForm"  prependId="true" enctype="multipart/form-data">
    <center>
        <p:tabView   id="alltabs">
            <p:tab id="tabupload" title="Upload File">

                    <h:outputText value="Choose Microsoft Excel or TXT file to import (.xls or .xlsx or .txt) "/>

                    <p:fileUpload id="uploaddatafile"
                                  style="width: 350px"
                                  value="#{addbookCnt.uploadedFile}"
                                  fileUploadListener="#{addbookCnt.handleFileUpload}"
                                  mode="advanced"
                                  sizeLimit="1000000"
                                  allowTypes="/(\.|\/)(xls|xlsx|txt)$/"
                                  fileLimit="1">
                    </p:fileUpload>
                        <h:commandButton  id="btnSubmit"  actionListener="#{addbookCnt.utest()}" value="Save">
                            <f:ajax execute="@form alltabs tabupload " render="@all"/>
                        </h:commandButton>
                    </h:panelGrid>
                </h:panelGrid>
            </p:tab>
        </p:tabView>
    </center>
</h:form>

<h:form   id="tables">

</h:form>

import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;

@ManagedBean(name = "addbookCnt")
@ViewScoped
public class ABController implements Serializable {

    private UploadedFile uploadedFile;

    public void handleFileUpload(FileUploadEvent event) {
        LOG.info("handle file upload");
        uploadedFile = event.getFile();
    }

    public void utest() {
        LOG.info(uploadedFile.getFileName());
    }

    public UploadedFile getUploadedFile() {
        return uploadedFile;
    }

    public void setUploadedFile(UploadedFile uploadedFile) {
        this.uploadedFile = uploadedFile;
    }
}
1
ajaxjsffile-uploadprimefaces
It is a JavaScript error. Do you really feel that only the said <f:fileUpload> is the culprit and not your own ignorance somewhere else? Try using a single <p:fileUpload> in a separate XHTML file ignoring the whole mess of other XHTML tags. – Tiny
reduce the complexity of your example first... and see what you can remove that makes the problem disappear. Then you have found the problem – Kukeltje
jsf h:commandButton makes javascript errors written on the top. This commandButton must update both two forms. i made some changes now example is simple. – Rashad
Since you are using PrimeFaces, you can replace the standard JSF <h:commandButton> with the enhanced PrimeFaces <p:commandButton> but that's a story apart. You may want to debug further about what JavaScript file(s) is causing the error. – Tiny
i can remove p:ajax from jsf commandButtons and then everything works properly. I asked to know if there any solutions make upload and ajax call together – Rashad

1 Answers

1
votes

I face the same problem in primefaces 5.2 (loaded two times on a page). Created a pull request https://github.com/primefaces/primefaces/pull/143 we'll see when they'll fix this. Until then it's enough that you fix your corrupted minified version directly with following line:

function(a){if(a.PrimeFaces){a.PrimeFaces.debug("PrimeFaces already loaded, ignoring duplicate execution.");return}