Question

I’m attempting to stop users being able to refresh the page using ‘F5’, but only when the Thickbox is shown.

Trouble is, after I switch between pages in the Thickbox, my check below to see if the Thickbox is visible always returns false –

var bol_thickbox_shown = ($('#TB_window').is(':visible')) ? true : false;

I assume this is to do with the way in which the page is loaded (probably an AJAX call), but I don’t know how to accout for that when checking if the Thickbox is visible. Can anybody please help? Thanks.

Here is my full code –

/**
 * Prevent F5 from refreshing the page if the Thickbox is shown
 */
document.onkeydown = function(e){

    /** Check to see if the Thickbox is being shown */
    var bol_thickbox_shown = ($('#TB_window').is(':visible')) ? true : false;
    console.log('bol_thickbox_shown: '+bol_thickbox_shown);

    if(bol_thickbox_shown && e.keyCode === 116){ // F5 keycode is 116

        e.preventDefault();
        e.returnValue = false; // for IE

    }

}

Answer 1

You could trigger the var bol_thickbox_shown outside this function and set it to true when the thickbox open and to false if they where closed.

for example:

var bol_thickbox_shown = false;

/* hook this bol_thickbox_shown true/false 
   to wherever you fire the Thickbox */

document.onkeydown = function(e){

    console.log('bol_thickbox_shown: '+bol_thickbox_shown);

    if(bol_thickbox_shown && e.keyCode === 116){ // F5 keycode is 116

        e.preventDefault();
        e.returnValue = false; // for IE

    }

}

and even you don’t like this solution you could optimize the following line:

var bol_thickbox_shown = ($('#TB_window').is(':visible')) ? true : false;

to

var bol_thickbox_shown = $('#TB_window').is(':visible');