Can't disable jQuery cache

Question

Update

I figured out that it must be caching problem but I can't turn cache off. Here is my changed script:

<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
        jQuery.ajaxSetup({
            // Disable caching of AJAX responses 
            cache: false
        });

        jQuery("#button1").click(function (e) {
            window.setInterval(refreshResult, 3000);
        });

        function refreshResult()
        {
            jQuery("#divResult").load("/Home/Refresh");
        }
</script>

It updates part of a web page every 3 sec. It works only once after clearing web browser cache, after that it doesn't work - requests are made to /Home/Refresh without interval of 3 seconds, data is send from the server, but nothing is displayed on the web page; subsequent requests send cookie ASP.NET_SessionId=wrkx1avgvzwozcn1frsrb2yh. I am using ASP.NET MVC 2 and c#.

I have a problem with jQuery, here is how my web app works

• Search.aspx web page which contains a form and jQuery script posts data to Search() action in Home controller after user clicks button1 button.

Search.aspx:

<%@ Page Title="" Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage<GLSChecker.Models.WebGLSQuery>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Title  
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Search</h2>

    <% Html.EnableClientValidation(); %>

    <% using (Html.BeginForm()) {%>    
        <fieldset>
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Url) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Url, 
                    new { size = "50" } ) %>
                <%: Html.ValidationMessageFor(model => model.Url) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.Location) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Location, 
                    new { size = "50" } ) %>
                <%: Html.ValidationMessageFor(model => model.Location) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.KeywordLines) %>
            </div>
            <div class="editor-field">
                <%: Html.TextAreaFor(model => model.KeywordLines, 10, 60, null)%>  
                <%: Html.ValidationMessageFor(model => model.KeywordLines)%>
            </div>

            <p>
                <input id ="button1" type="submit" value="Search" />
            </p>
        </fieldset>

    <% } %>

    <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery("#button1").click(function (e) {
            window.setInterval(refreshResult, 5000);
        });

        function refreshResult()
        {
            jQuery("#divResult").load("/Home/Refresh");
        }
    </script>

   <div id="divResult"> 
   </div>

</asp:Content>

        [HttpPost]
        public ActionResult Search(WebGLSQuery queryToCreate)
        {
            if (!ModelState.IsValid)
                return View("Search");

            queryToCreate.Remote_Address = HttpContext.Request.ServerVariables["REMOTE_ADDR"];
            Session["Result"] = null;

            SearchKeywordLines(queryToCreate);

            Thread.Sleep(15000);

            return View("Search");
        }//Search()

• After button1 button is clicked the above script from Search.aspx web page runs.

• Search() action in controller runs for longer period of time. I simulate this in testing by putting Thread.Sleep(15000); in Search()action.

• 5 sec. after Submit button was pressed, the above jQuery script calls Refresh() action in Home controller.

        public ActionResult Refresh()
        {               
            ViewData["Result"] = DateTime.Now;

            return PartialView();
        }

• Refresh() renders this partial

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%= ViewData["Result"] %>

The problem is that in Internet Explorer 8 there is only one request to /Home/Refresh; in Firefox 3.6.3 all requests to /Home/Refresh are made but nothing is displayed on the web page. Another problem with Firefox is that requests to /Home/Refresh are made every second not every 5 seconds.
I noticed that after I clear Firefox cache the script works well first time button1 is pressed, but after that it doesn't work.

I would be grateful for helpful suggestions.

Answer 1

The IE8 problem might be that IE caches similar requests, but I'm not too familiar with JQueries internals if they handle this or not, a solution could be to add a random get var.

Answer 2

You could change the URL you are requesting by adding a timestamp as part of the GET parameters:

function refreshResult()
{
  jQuery("#divResult").load("/Home/Refresh?"+(+new Date()));
}

This should ignore the browser cache (as the url is changing every time). Of course - this is what setting the jQuery cache parameter to false on ajax requests does, I'm just not 100% sure that .load() will use that setting.

Answer 3

I found the solution, I replaced

<% using (Html.BeginForm()) {%>

with

<% using (Ajax.BeginForm(null)) {%>