views:

536

answers:

3

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.

A: 

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.

Tomh
"random get var" - could you give me a code example, please?
robert_d
jQuery("#divResult").load("/Home/Refresh?"+Math.floor(Math.random()*100000000)); for example
Tomh
It works (in IE8 and Firefox) first time after clearing web browser cache, but subsequent submissions don't work - requests to /Home/Refresh are made every second not every 5 seconds, and nothing is displayed on the web page.
robert_d
Subsequent requests to /Home/Refresh use cookie ASP.NET_SessionId=cnn0mffzalceg2l5b3thztw0.I disabled cachingCache-Control: no-cache, no-store, must-revalidatePragma: no-cacheExpires: -1
robert_d
Use jquery.ajaxSetup({ cache: false }) in your javascript to prevent the browser from caching the responses.
tdaines
I did this and it didn't work.
robert_d
I had the same issue and did what Tomh suggests, but used timestamps instead. e.g. jQuery.ajax("somepage.php",{PARAM_ONE: param1, PARAM_TWO: param2, RANDOM_STRING: new Date().getTime()}, function(data) { ...});
RenderIn
I did this, doesn't work.
robert_d
A: 

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.

gnarf
I did that, doesn't work.
robert_d
A: 

I found the solution, I replaced

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

with

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