Disabling a jQuery function

Question

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>

Julien Bourdon · Accepted Answer · 2012-02-24 03:38:13Z

3

Try this:

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

Here is the replaceContent() function:

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

answered Feb 24, 2012 at 3:38

Julien Bourdon

1,72318 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gautam vegeta Over a year ago

This works perfectly.How can i get the status whether the user has clicked ok or cancel when my custom message appears.I wanted to fire an ajax request based on the user's choice.

Julien Bourdon Over a year ago

You can use the return value of confirm function. status = confirm('Are you sure you want to leave?')

fardjad · Accepted Answer · 2012-02-24 03:51:58Z

2

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.

edited Feb 24, 2012 at 3:51

answered Feb 24, 2012 at 3:39

fardjad

20.5k6 gold badges55 silver badges68 bronze badges

Comments

Purag · Accepted Answer · 2012-02-24 04:00:17Z

1

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.

edited Feb 24, 2012 at 4:00

answered Feb 24, 2012 at 3:48

Purag

17.1k4 gold badges57 silver badges78 bronze badges

5 Comments

gautam vegeta Over a year ago

This works perfectly.How can i get the status whether the user has clicked ok or cancel when my custom message appears.I wanted to fire an ajax request based on the user's choice.

Purag Over a year ago

@gautamvegeta: I edited my answer. What happens now is a dialog box appears (a confirmation dialog, to be exact). If the user clicks OK, the first portion of the inner if statement is fired, where you would put your ajax call. If not, it'll return false.

gautam vegeta Over a year ago

I have added the entire code.There seems to be a problem in the page closing.The message is getting called twice and web page is not closing too.

gautam vegeta Over a year ago

And the message is getting displayed for refresh and the close buttons.How can this be separated.

Purag Over a year ago

@gautamvegeta: I cannot do all the work for you. I've showed you the concept here, so wrap your head around it, figure out how it works, and you should be able to find out how to fix your problems. Do some Google searches.

Collectives™ on Stack Overflow

Disabling a jQuery function

3 Answers 3

2 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related