CODEWITHSUNDEEP
javascriptjquerysafaribrowser-cachebfcache
binoculars
binoculars

Reputation: 2274

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.

Upvotes: 0

Views: 1463

Answers (2)

Liyong
Liyong

Reputation: 11

The event pageshow can be triggered even in bfcache, so write your js code like this:

window.addEventListener('pageshow', function( e ){
    //your code
});

Upvotes: 1

binoculars
binoculars

Reputation: 2274

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");
?>

Upvotes: 0

Related Questions