Check if AJAX generated content is visible

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');