Search code examples
javascriptjquerysafaribrowser-cachebfcache

Button stays disabled after "back" in safari due to bfcache

I submit a form using

$('#submitbutton').attr('disabled','true');
setTimeout(function(){ $("#myform").submit(); }, 100);

In safari, when returning to this page by clicking the back button of the browser, the button is still disabled.

I've tried adding:

$( document ).ready(function() {
    $('#submitbutton').removeAttr("disabled");
...

but that doesn't work either.

I've looked online, and it seems that this has to do with bfcache. While I understand the concept of this cache, and how this can improve loading speed, I don't want it on this page. Is there an easy solution to disable it, cross-browser? The solutions I've found online are all 2-5 years old, and don't work.

Note that in Chrome, everything works fine: the button is enabled AND all my JS is executed after clicking the back-button.

I could implement things like enabling the button on page leave or something like that, but I really don't like this different behaviour in different browsers. So I want to disable bfcache for all browsers, OR, use bfcache in all browsers.

Note: I don't want to force a page refresh after clicking the back button, because this looks very ugly and bulky on my page.

Solution

  • Got it working by adding this PHP code:

    <?php
header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: 0");
?>