IE Caching issue is breaking my lookup field.

Question

I'm doing a project which uses javascript to get info from a view (written in Python and using the Django interface) based on the text a user enters in a field (querying on every keyup), and then display that info back. Basically, this either displays 'no job found' or displays the name, username, and balance for that job. In Firefox, this all works great. I can enter a JobID, it tells me the ID is new, and I can create the job. I can then immediately come back to the page and enter that ID, and my lookup returns the right info about the job.

The thing is, Internet Explorer 8 is being lazy. If I type a job ID in IE8, my functions calls the lookup page (/deposits/orglookup/?q=123) and gets a value. So if, for example, it gets False, I can then create a new job with that ID. If I then browse back and enter that same number in that same lookup field, Internet Explorer does not refresh the lookup page, so it returns false again. If I browse to that lookup page, I see that false value, but if I refresh it, I get the right information again. Any idea on how I can force this query every time I type in my lookup field, and not like IE refer to the cached page?

I will add that it does not do me much good to fix this on a per-user basis, as this is an organization-wide application, so I really could use a fix I can write into my code somewhere to force IE to actually refresh the lookup page every time it is supposed to.

Here's the code for the lookup function, if it helps. It is a bit messy, but I didn't write it so I'll try to include everything relevant:

$("#id_JobID").keyup( 

    function(event){

        //only fire gets on 0-9, kp 0-9, backspace, and delete
        if (event.keyCode in { 96:1, 97:1, 98:1, 99:1, 100:1, 101:1, 102:1, 103:1, 104:1, 105:1,
                                46:1,48:1, 49:1, 50:1, 51:1, 52:1, 53:1, 54:1, 55:1, 56:1, 57:1, 8:1}) 
        {

            if ($("#loadimg").attr("src") != "/static/icons/loading.gif") {
                $("#loadimg").attr("src", "/static/icons/loading.gif");
            }

            if ($("#loadimg").length < 1) {
                $("#id_JobID").parent().append("<img id=loadimg src=/static/icons/loading.gif>");
            }

            clearTimeouts(null); //clear all existing timeouts to stop any running lookups
            GetCounter++; 
            currLoc = window.location.href.slice(window.location.href.indexOf('?') + 1).split('/').slice(-2,-1);

            if (currLoc == 'restorebatch') {
                var TimeoutId = setTimeout(function() {dynamicSearch('restorelookup');}, 400);
            } else {
                var TimeoutId = setTimeout(function() {dynamicSearch('orglookup');}, 400);
            }

            //alert(TimeoutID);
            TimeoutBag[GetCounter] = {
                'RequestNumber': GetCounter,
                'TimeoutId': TimeoutId
            }
        }
    }
);

function clearTimeouts(TimeoutBagKeys) //TimeoutBagKeys is an array that contains keys into the TimeoutBag of Timeout's you want to clear
{
    if(TimeoutBagKeys == null) //if TimeoutBagKeys is null, clear all timeouts.
    {
        for (var i = 0; i < TimeoutBag.length; i++)
        {
           if (TimeoutBag[i] != null) {
            clearTimeout(TimeoutBag[i].TimeoutId);
           }
        }
    }
    else //otherwise, an array of keys for the timeout bag has been passed in. clear those timeouts.
    {
        var ClearedIdsString = "";
        for (var i = 0; i < TimeoutBagKeys.length; i++)
        {
            if (TimeoutBag[TimeoutBagKeys[i]] != null)
            {
                clearTimeout(TimeoutBag[TimeoutBagKeys[i]].TimeoutId);
                ClearedIdsString += TimeoutBag[TimeoutBagKeys[i]].TimeoutId;
            }
        }        
    }
}
function dynamicSearch(viewname) {

        $(".lookup_info").slideUp();


        if ($("#id_JobID").val().length >= 3) {
            var orgLookupUrl = "/deposits/" + viewname + "/?q=" + $("#id_JobID").val();
                getBatchInfo(orgLookupUrl);

        }
        else if ($("#id_JobID").val().length  == 0) {
            $("#loadimg").attr("src", "/static/icons/blank.gif");
            $(".lookup_info").slideUp();
        }
        else {
            $("#loadimg").attr("src", "/static/icons/loading.gif");
            $(".lookup_info").slideUp();
        }
}
function getBatchInfo(orgLookupUrl) {
                $.get(orgLookupUrl, function(data){ 
                    if (data == "False") {
                        $("#loadimg").attr("src", "/static/icons/red_x.png");
                        $(".lookup_info").html("No batch found - creating new batch.");
                        $("#lookup_submit").val("Create");
                        $(".lookup_info").slideDown();
                        toggleDepInputs("on");
                    }
                    else {  
                        $("#loadimg").attr("src", "/static/icons/green_check.png");
                        $("#lookup_submit").val("Submit");
                        $(".lookup_info").html(data);
                        $(".lookup_info").slideDown()
                        toggleDepInputs("off");
                    };
                 });
}

Answer 1

You need to make the URL unique for every request. The failproof way is to introduce new GET parameter which has a timestamp as its value - so the URL is unique with every request, since timestamp is always changing, so IE can't cache it.

url = "/deposits/orglookup/?q=123&t=" + new Date().getTime()

So instead of only one parameter (q) you now have two (q and t) but since servers usually don't care bout extra parameters then it's all right

Answer 2

A solution that should work would be to add an additional random parameter to your request, like "nocache=Random Number"

Answer 3

There are three solutions to this:

Either

• Use $.post instead of $.get
• Add a random GET parameter to your URL, e.g. "?update=10202203930489" (of course, it needs to be different on every request)
• or prohibit Caching on server side by sending the right headers (if-modified-since)

Answer 4

One trick that often works is to append a timestamp to the lookup url as a querystring parameter, thus generating a unique url each time the request is made.

var orgLookupUrl = "/deposits/" + viewname + "/?q=" + $("#id_JobID").val() + "&time=" + new Date().getTime();;