How to force a page refresh while pressing the back button in MAC safari

Question

I have two aspx pages(A,B) created using ASP.NET MVC . In the file A i have a few check boxes and textboxes.

When i move to page B and try to navigate to page A by pressing the browser back button(in MAC Safari), the page is not getting refreshed . The page retains its old values (for checkboxes and textboxes).

When i had the break point in the server side . I am able to get the hit.

I am sure that the server side action method is called . There is some issue with the MAC SAFARI browser.

I tried the same use case in the other browsers IE and FF , it seems to work corretly .

Fairly simple , but i dint get the right answer while googling.

Could someone suggest a work around for this in MAC.?

Thanks ,

vijay

Answer 1

Try setting autocomplete="off" on your form

This also happens if you refresh the page on firefox.

Answer 2

I haven't checked, but I'm fairly sure that Safari for Mac is not the only browser to do this. This is because of the way the cache of the browser works. When you go back in the browser history, Safari (and AFAIK Firefox as well) doesn't request the page again. Instead, Safari/Webkit keeps a copy in memory of the previous visited page, so that going back is almost instantaneous.

In this situation, Safari is keeping an exact copy of it, including the values of the inputs. In a normal situation, this could be handy for the user, and as I said I don't think Safari is the only one who does this (and even if it were, other browsers could opt to do the same in the future, so you shouldn't target it specifically).

Disabling the cache for the 'A' action should do the trick, as it should force the browser to get the page again (and reset the value of the inputs). Something like this:

[System.Web.Mvc.OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ActionResult A()
{
    return View();
}

If this doesn't solve the problem, you might have to clear the values with javascript in the onload event of the webpage (this should be pretty trivial to do with jquery). Something like:

$(document).ready(function() {

     $('input').each( function() {
         if($(this).attr('type') == 'checkbox') { 
              this.checked=false;
         } else {
              $(this).val('');
         }
     }

})

Note: the code is untested, but I hope it helps (if disabling the cache for the page fails) :)