CODEWITHSUNDEEP
javascriptjqueryhtml
gautam vegeta
gautam vegeta

Reputation: 653

Disabling a jQuery function

I have a jQuery function which monitors the 'beforeunload' status. So therefore every time i do a refresh this method is executed.

The function is as follows:


 <script type="text/javascript"> 

var bIsSafeRedirect = false; 

$('#reload').click(function() 
{ 
bIsSafeRedirect = true; 
location.reload(); 

}); 

$(window).bind('beforeunload', function() 
{ 
if (!bIsSafeRedirect ) 
{ 
return '>>>>>Before You Go<<<<<<<< \n Your custom message go here'; 
} 
}); 



</script>

Now i have other components such as 

<td onClick="window.location.replace('try.html')" id="reload" target="Content">

which onclick reloads the same page. I this scenario where the table data is clicked i dont want the jQuery function to be invoked.I want it to be skipped as a special case. How can i achieve it.

The entire code is shown below

<html> 
<head> 
<title>Refresh a page in jQuery</title> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
function load() 
{ 
document.getElementById("first").value="hello"; 
} 
</script> 
</head> 

<body> 

<h1>Stop a page from exit with jQuery</h1> 

<button id="reload">Refresh a Page in jQuery</button> 

 <script type="text/javascript"> 

var bIsSafeRedirect = false; 

function unload(type, url){ 
if(type === 'noReturn'){ 
$(window).unbind("beforeunload"); 
window.location.replace(url); 
} else if(!bIsSafeRedirect && type === 'return') { 
var conf = confirm('do you want to quit'); 
if(conf){ 
alert("ajax"); 
} else { 
return false; 
} 
} 
}  

$(window).bind("beforeunload", function(){ 
unload('return'); 
}); 



</script> 

<table> 
<tr>
<td onClick="window.location.replace('try.html')" id="reload" target="Content"> 
<td onClick="unload('noReturn','try.html')">
Usual Refresh 
</td>
</tr> 
</table> 
<input type="text" id="first" size="15"/> 
<input type="button" onclick="load()" value="load"/> 

</body> 
</html>

Upvotes: 1

Views: 379

Answers (3)

Purag
Purag

Reputation: 17061

Make a function that handles both of these:

function unload(type, url){
    if(type === 'noReturn'){
        $(window).unbind("beforeunload");
        window.location.replace(url);
    } else if(!bIsSafeRedirect && type === 'return') {
        var conf = confirm('Confirmation message');
        if(conf){
            // fire ajax call here
        } else {
            return false;
        }
    }
}

And then fire this function in your bind() call:

$(window).bind("beforeunload", function(){
    unload('return');
});

Since we supply the return string to the type parameter, it fires the else if part of the if statement, which doesn't unbind the beforeunload event and so returns that string.

And for your other components:

<td onClick="unload('noReturn','try.html')"></td>

So now, since we have supplied the noReturn string to the type parameter, the first part of the if statement will execute and load the page without the interference of the beforeunload handler by unbinding it.

With this method, you can use the unload function on multiple elements' inline onclick handlers and make it a more globally usable script.

Upvotes: 1

fardjad
fardjad

Reputation: 20394

one way is to prepend this to onClick:

$(window).unbind('beforenload');

the other way is to use a global flag, exactly like the bIsSafeRedirect you're currently using. Change the beforeunload handler body like this:

if (shouldRefresh && !bIsSafeRedirect) 
{ 
    return '>>>>>Before You Go<<<<<<<< \n Your custom message go here'; 
}

and set shouldRefresh value to false in onClick.

Upvotes: 2

Julien Bourdon
Julien Bourdon

Reputation: 1723

Try this:

<td onClick="replaceContent();" id="reload" target="Content">

Here is the replaceContent() function:

function replaceContent(){
  $(window).unbind('beforeunload');
  window.location.replace('try.html');
}

Upvotes: 3

Related Questions