Question

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.

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)

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.

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.

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.

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.

this is the form:

    <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>

this is the ajax call

   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" ) );
      }
   } );

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.

There is no Comet enabled. It is a plain jQuery app.

If anyone has a clue.

Answer 1

It looks like IE9 tries to be smart about caching and caches everything that is not explicitly set to be expired.

The solution for me was to change the Response (I use Jersey) to be expired upon arrival. Here’s how that works.

Normal response:

return Response.ok( jsForms.toJSONString(), MediaType.APPLICATION_JSON_TYPE ).build();

Expired response:

return Response.ok( jsForms.toJSONString(), MediaType.APPLICATION_JSON_TYPE ).expires( new Date( 1000 ) ).build();

notice the addition of expires( new Date( 1000 ) )

that did the trick.