How to stop browser(espcially Internet Explorer) from doing super caching of javascript?

Question

Hi

I don't know what is going on but this is really evident in IE 8. It loads up my page and my javascript files.

I then have debug lines in my server side code that should get activated when an ajax request from my jquery comes through. Or some other contact with the server such a refreshing the page.

So I have this

var timeout;
var wait = 300000;
$(function()
{
    timeout = null;
    timeout = setTimeout("SessionTimeOut()", wait);
    $.get('SessionTimeOut', null, function(response)
    {
        timeout = clearTimeout(timeout);
        wait = parseInt(response);
        timeout = setTimeout("SessionTimeOut()", wait);
    });
});

This should run every time the page is loaded and start a timer to monitor if they should be logged out or not. I reset the timer every time they make a request to the server.

Some times when a user logs in they all of a sudden get timed out. So I put a default timer of 5 mins in to see if that would fix the problem.

So now say the user times out since they are inactive for like 30mins. They come back and get sent to my login page. So they are going to a new page. I would hope all this javascript stuff would be destroyed and all the timeout objects would be destroyed.

They then try to log in(Using IE8). Guess what they will get the message that they where timed out since IE8 seems to not want to run this script anymore.

I tried refreshing the page but that does nothing. It seems like once the script has ran it has ran for the entire time the browser is opened.

I have many pages with that uses the code above. Yet once it ran once in one page and you go to another page it won't run again.

The only way to get it to run again is close the browser down or clear all your cache.

So how can I make it run again?

Edit

Here is my server code(well portion of it)

  public ContentResult SessionTimeOut()
    {
         var time = signOut.FigureSessionTime();
        // minues 2 mins to make up for any lost time.
        double total = time.TotalMilliseconds - 120000;
        return Content(total.ToString());
    }

So basically the FigureSessionTime out looking inside the users cookie and checks to see if the cookie is by end of session or if they choose to be kept logged in for 2 weeks.

If they choose 2 weeks then 2 weeks worth of milliseconds will be returned back. If it is by session then 30mins of milliseconds will be returned back.

I just take 2 mins of to be on the save side so the client side should always timeout before serverside.

return the time in millseconds

// this is what it returns

1670778.4725000001

---

Edit 2

Ok so this is what I just did to test some things out.

IE 8

Launched a page that a user does not need to log into. This means no cookie to check there session meaning -120000 will come back. This was verified by an alert box. Since this was like an instant timeout the second that page loaded up I was timed out.

Next I tried to log into a page that was secure and that would take the cookie out check it and return a timeout time back. I had an alert box and checked what was stored in the wait variable.

What the alert box came was -120000 so this should not be. It should be some high number. I was instantly logged out and sent to the login page.

I then went into the "safety tab" in IE 8 and choose "Delete browsing history" a popup came up and I checked all the avaiable options and hit"Delete".

I did this all while being on my site and never left it. So I just typed in my login credentials and logged in.

Now the wait variable has this in it "1677207". So this is like 27mins or something like that.

So why did the first time come back negative? Is it because it first timed out on some other page and cached this or did it just not feel like to work?

I now just tired something else. I cleared the browsing history and closed down IE 8. I then launched my website through VS2008 and loaded it up on my login page.

I then logged in and out 5 times. Each time I logged in I noted the wait time.

This is the results

1678237
1678237
1678237
1678237
1678237

So for 5 times the time was exactly the same not even a millisecond off.

Now lets check firefox.

I did the same thing started my site through VS2008 to launch firefox and go to my signin page.

I logged in 5 times in and out. Each time the alert box came up with the wait time in it I noted it.

This is the results

1677176
1677800
1678003
1677956
1677800

Every single time I logged in it was a different time. So for some reason firefox brought back different results each time but IE8 magically could always do it in the same time not even a millisecond more or less?

I after did what I did before in IE8 I went to a page that would time the user out and return -12000. I went to this page and it did just that and returned me to the sign in page.

I then logged in and the wait time that showed up was "1677940". So it actually went and ran my code and got a different time back. Where IE8 just used the previous -12000 over and over again. I could probably log in a million times and it would always -12000. Once it gets a value it seems to keep that.

Edit 3

---

You all can try at home now.

Here is what you need

// Javascript file
    var timeout;
    var wait = 300000;
    $(function()
    {
        timeout = null;
        timeout = setTimeout("SessionTimeOut()", wait);
        $.get('SessionTimeOut', null, function(response)
        {
            timeout = clearTimeout(timeout);
            wait = parseInt(response);
            alert(wait);
            timeout = setTimeout("SessionTimeOut()", wait);
        });

        /* starts every time a ajax request is made */
        $().ajaxStart(function(e)
        {

            timeout = clearTimeout(timeout);
            $('body').css('cursor', 'progress');
        });

        $().ajaxStop(function(e)
        {
            $('body').css('cursor', null);
        });

        $().ajaxComplete(function(event, XMLHttpRequest, ajaxOptions)
        {

            if (timeout == null)
            {
                timeout = setTimeout("SessionTimeOut()", wait);

            }

        });
    });

    // need to have dialog ui javascript for this.
    function SessionTimeOut()
    {
    //    $('#content').append('<div id="SessionTimeout" title="Session Time Out">Your session has timed out. You must sigin again.</div>');
    //    $('#SessionTimeout').dialog(
    //    {
    //        height: 140,
    //        resizable: false,
    //        modal: true,
    //        closeOnEscape: false,
    //        buttons:
    //        {
    //            'Return To Sign In Page': function()
    //            {
    //                window.location.href = "/account/signin";
    //            }
    //        }
    //    });
    //    $('#ui-dialog-title-SessionTimeout').siblings('a').remove();

    }

// Index View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
    <script src="../../JScript1.js" type="text/javascript"></script>
</head>
<body>
    <div>

    </div>
</body>
</html>

//TestController

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using System.Web.Mvc.Ajax;

    namespace MvcApplication1.Controllers
    {
        public class TestController : Controller
        {
            //
            // GET: /Test/

            public ActionResult Index()
            {
                return View();
            }



  public ContentResult SessionTimeOut()
        {
            Random random = new Random();

           return Content(random.Next(100).ToString());

        }



    }
}

If you run this code in IE8 you will get the same random number each time. Try it in firefox and you wont.

Answer 1

Seeing as there is no JQuery and ASP.NET experts speaking up, I'll chip in my €0.02: I doubt this is solely a caching issue. I don't speak JQuery fluently enough to understand what your Ajax call is doing but I have a feeling the problem is there rather than in caching. But I can be wrong there.

Anyway, the easiest way to prevent caching of a Javascript file is to append a random timestamp to the URL:

<script language='script.js?timestamp=1020349302930'>

this will make the script load anew on every instance. If you can use only JS, you can use Math.rand to create the random value and then create or document.write the <script> tags. Or of course, use the server side language of your choice. ( I just saw in your tags that that is ASP.NET)

The cleaner way would be setting the right caching headers either in your server configuraiton, or by sending out headers dynamically inside the JS files (which would have to be parsed by a language like PHP or ASP to do that).

Maybe this gives fresh input in hunting down what's wrong. Good luck!

Answer 2

I agree with Pekka that the problem is more likely not to be in the browser caching.

It looks like you're using the $get call to fetch the timeout value from the server. This seems... odd. If that's not what you're trying to do, then why do you parse the response as the timeout value? If that is what you're trying to do, then are you sure that the response that's returned contains the value that you expect it to contain?

Answer 3

I had a similar problem recently. Disabling caching for may ajax call cleared it out. Try this guy:

var timeout;
var wait = 300000;
$(function()
{
    timeout = null;
    timeout = setTimeout("SessionTimeOut()", wait);
    $.ajax({
        url:'SessionTimeOut', 
        success:function(response) {
            timeout = clearTimeout(timeout);
            wait = parseInt(response);
            timeout = setTimeout("SessionTimeOut()", wait);
        },
        type:'get',
        cache:false
    });
});

notice the cache:false option