StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIE9 does not call ajax methods after file upload
text
Body
copied!<p>I have created a simple file upload page. To keep it really simple, I refrained from using iFrames to include the file inputs. Thus, the file submission triggers a page reload because the form is submitted. This is needed in order to display the uploaded file names on the page. The file names are fetched via AJAX calls in jQuery. </p> <p>Everything works like a charm in Chrome, Firefox, Opera, Safari on mac and windows (I have not tested Linux but I guess it works too)</p> <p>My issue is that in IE9, when I open the browser, the ajax call is made and the data is displayed. But once a file has been uploaded this stops working. </p> <p>In order to be sure, the server was started in debug mode and I set a break point in the service method. The break point is reached as long as no file has been uploaded.</p> <p>As soon as a file has been uploaded (which works, by the way) the break point is not reached anymore. IE9 does not call the service method and the data does not change anymore. Even navigating to another page (google.com) and loading the page again by writing the URL does not help.</p> <p>This is the weirdest behavior I have seen so far in a browser: the form is submitted and the file is sent, but no subsequent ajax calls are performed and the page does not change. But the javascript behaves as if the AJAX call was made. It is just that the server is not involved anymore.</p> <p>this is the form:</p> <pre><code> <form method="post" action="${pageContext.request.contextPath}/services/prepop/upload/csv" id="fileUploadForm" enctype="multipart/form-data"> <div class="file-upload"> <input id="uploadedFile" type="file" name="uploadedFile" onchange="submit()"/> </div> <input type="hidden" name="formId" value='{{formId}}'/> <input type="hidden" name="contentId" value='{{id}}'/> <input type="hidden" name="page" value='upload'/> </form> </code></pre> <p>this is the ajax call</p> <pre><code> app.log( "getting the form files" ); $.ajax( { url:"${pageContext.request.contextPath}/services/jsonrest/prepop/list", type:"GET", async:true, data:[ {name:"formId", value:formId} ], success:function ( prepopContentList ) { app.log( "the content file list was fetched with " + prepopContentList.length + " entries" ); upload.populateEntryList( prepopContentList, $( "#fileUploadList" ) ); } } ); </code></pre> <p>the strangest thing is that the log entries appear in the log but always with the same values. Looking at the content in debug mode confirms this. The array is always the same.</p> <p>There is no Comet enabled. It is a plain jQuery app.</p> <p>If anyone has a clue.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload