jQuery Ajax GET request won't cache

Question

I am trying to take an app of mine offline. I make a few GET requests to load modules into the app. I have added these files to my cache manifest so the request would still work.

function loadReportDiv(ajaxUrl) {
    $.ajax({
        type : "GET",
        cache: true,
        url : ajaxUrl,
        success : function(data) {
            console.log("REPORTS: " + ajaxUrl + "... load complete");
            $("#reports_menu_wrapper").after(data);
        },
        error : function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        }
    });
}
loadReportDiv("sales_reports.html");
loadReportDiv("call_reports.html");

I am running the app in chrome and setting the network to "offline" in my device emulator (emulating an iPad). The files I am loading with ajax have their own javascript files which are referenced in the .html files. When I try loading sales_reports.html and call_reports.html chrome fails to load the files and spits out the url it was trying to GET, which is: js/call_reports.js?_=1415997141636 .

The appended ?_=[timestamp] to the filepath, is breaking my app and I can't seem to prevent it from happening. As you can see I set my cache mode for my ajax request to true in an attempt to prevent this behaviour.

EDIT:

The version of jQuery I'm using is 1.11.1.

I have tried coding the ajax request in vanilla javascript and am having the same problem.

function loadReportDiv(ajaxUrl) {
  var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        console.log("REPORTS: " + ajaxUrl + "... load complete");
        $("#reports_menu_wrapper").after(xmlhttp.responseText);
    }
  }
  xmlhttp.open("GET", ajaxUrl);
  xmlhttp.send();       
}

The error is thrown in my jQuery file at line 9631: // Do send the request // This may raise an exception which is actually // handled in jQuery.ajax (so no try/catch here) xhr.send( ( options.hasContent && options.data ) || null );

But it is also still appending the time stamp to the request url.

Once again, any help would be greatly appreciated! Thanks.

Answer 1

I finally figured it out!

I have a bunch of .js libraries in my app and I guess somewhere along the way one of them is forcing ajax requests to not be cached. I have added this to my index.html file to counter-act that.

    <script>
        $(function(){
            $.ajaxSetup({
                cache: true
            });
        });
    </script>

Everything is working a-ok now!