We Keep Coding

Alert on page indexing in gridview

I have a gridview where I use page-indexing. If user navigates to next page I need to give an alert like "Make sure you updated the page before you move" and a pop up should display. If yes is clicked it should go to another page or if cancel is clicked it has to stay in the same page.
I am using this js, but the alert comes often if any button in the page is clicked. How can I display message only when paging is clicked.
<script type="text/javascript">
var isPaging;
$(".myPagingButton").on("click", function () {
isPaging = true;
});
function goodbye(e) {
if (!isPaging) {
return;
}
isPaging = false;
if (!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = 'Make sure you have updated the page before navigation?'; //This is displayed on the dialog
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
window.onbeforeunload = goodbye;
</script>

If you only want it to appear for the paging buttons, than set a flag when the buttons are clicked.
HTML:
<a class="myPagingButon" href="example.html">Paging</a>
JavaScript:
var isPaging;
$(function(){
$(".myPagingButon").on("click", function() { console.log("click");
isPaging = true;
});
});
function goodbye(e) {
if (!isPaging) {
return;
}
isPaging = false;
return 'Dialog text here.';
}
window.onbeforeunload = goodbye;
JSFiddle

document.getElementById('yourButton').addEventListener('click', function(){
window.addEventListener('beforeunload', function(){
goodbye();
});
});

How do i show prompt when user close any particular tab? (This is about individual tab not for all browser)

I am working on a project in which i need to do some custom development. and one of them is i have to display an popup when user closed the PARTICULAR TAB. I already try some solutions but it is not working as i want. either it is working on whole browser or not at all working. So how do I achieve prompt when user close any particular tab.
Solution i had try that is
Solution i tried

var validNavigation = false;
function wireUpEvents() {
/**
* For a list of events that triggers onbeforeunload on IE
* check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
*
* onbeforeunload for IE and chrome
* check http://stackoverflow.com/questions/1802930/setting-onbeforeunload-on-body-element-in-chrome-and-ie-using-jquery
*/
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
var leave_message = 'You sure you want to leave?'
function goodbye(e) {
if (!validNavigation) {
if (dont_confirm_leave!==1) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message;
}
}
}
window.onbeforeunload=goodbye;
// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
validNavigation = true;
}
});
// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function() {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function() {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();
});

Adding javascript to drupal is not recognize some jquery

I am trying to get this code working on drupal, but only works when I press f5, a links or forms are not working, any idea what is the problem with this code?
My objective is to kill the session when you close the tab or close the explorer. This code is a modification from this link: http://eureka.ykyuen.info/2011/02/22/jquery-javascript-capture-the-browser-or-tab-closed-event/#comment-6936
<code>
(function($) {
var validNavigation = false;
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
var leave_message = 'Do you want to exit?';
function goodbye(e) {
if (!validNavigation) {
if (dont_confirm_leave!==1) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
// window.open('DelLogged.php?Id=');
return leave_message;
}
}
}
// Attach the event click for all links in the page
$("a").click(function () {
validNavigation = true;
alert("Link press");
});
// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
validNavigation = true;
alert("F5 press");
}
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function() {
validNavigation = true;
alert("Form press");
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function() {
validNavigation = true;
alert("input press");
});
window.onbeforeunload=goodbye;
})(jQuery);
</code>

I think you're not using the (function($){}(jQuery)); closure correctly, as the brackets are not written the right way. You've written
(function($) {
...
})(jQuery);
closing the initial bracket before (jQuery);
Try changing this and lets see if may solve the issue :)

Trying to get Chrome to show a about to leave page using onbeforeunload

I am working on a Javascript that is suppose to do a click feature on an element as well as showing a pop-up asking if you want to really leave the site (close the tab). Now The code works fine on IE and Firefox. But Chrome while it does do the important thing in terms of doing the click(); It will not show a pop-up asking if I want to leave or not. I Don't know if its a feature I need to enable in the Chrome browser or something else. Here is the code I am using. Any help would be much appreciated.
var validNavigation = false;
function wireUpEvents() {
var dont_confirm_leave = 0;
var leave_message = document.getElementById("kioskform:broswerCloseSubmit");
function goodbye(e) {
if (!validNavigation) {
if (dont_confirm_leave!==1) {
if(!e) e = window.event;
//for IE
e.cancelBubble = true;
e.returnValue = leave_message.click();
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message.click();
alert("Removing information.");
//add the code to delete the kiosk information here.
// this is what is to be done.
}
}
}
window.onbeforeunload=goodbye;
// Attach the event keypress to exclude the F5 refresh
jQuery('document').bind('keypress', function(e) {
if (e.keyCode == 116){
validNavigation = true;
}
});
// Attach the event click for all links in the page
jQuery("a").bind("click", function() {
validNavigation = true;
});
// Attach the event submit for all forms in the page
jQuery("form").bind("submit", function() {
validNavigation = true;
});
// Attach the event click for all inputs in the page
jQuery("input[type=submit]").bind("click", function() {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
jQuery(document).ready(function() {
wireUpEvents();
});

You have to return a string in the onbeforeunload function to show the message to the user, see also Setting onbeforeunload on body element in Chrome and IE using jQuery

Setting onbeforeunload on body element in Chrome and IE using jQuery

I have a system where I want to check with the user if they're sure they want to leave the page once a dirty flag is set.
I'm using the following code - In FireFox, I can look at the page source through FireBug and the tag correctly has the onbeforeunload attribute inserted in it.
In Chrome and FireFox, this doesn't happen though and I'm able to navigate away from the page without any warning at all. The jQuery line to update the body tag is definitely being executed, it just isn't performing it.
if ($("body").attr('onbeforeunload') == null) {
if (window.event) {
// IE and Chrome use this
$("body").attr('onbeforeunload', 'CatchLeavePage(event)');
}
else {
// Firefox uses this
$("body").attr('onbeforeunload', 'return false;CatchLeavePage(event)');
}
}
Any ideas how to proceed from here?

you cannot abort page unload by returning false. you must return string that will be shown to user in a message box, and he decides if he want to leave or stay on the page (by selecting either 'OK' or 'Cancel' button), so you need to write your code like this:
window.onbeforeunload = function() {
return "Are you sure you want to leave this page bla bla bla?"; // you can make this dynamic, ofcourse...
};

try this
<script type=\"text/javascript\">
var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
var leave_message = 'You sure you want to leave?'
function goodbye(e)
{
if(dont_confirm_leave!==1)
{
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation)
{
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message;
}
}
window.onbeforeunload=goodbye;
</script>

window.onbeforeunload = function () { return 'Are you sure?' };

Check this code :
var validNavigation = false;
function wireUpEvents() {
var dont_confirm_leave = 0;
var leave_message = "You sure you want to leave ?";
function goodbye(e) {
if (!validNavigation) {
if (dont_confirm_leave !== 1) {
if (!e) e = window.event;
e.cancelBubble = true;
e.returnValue = leave_message;
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
return leave_message;
}
}
}
window.onbeforeunload = goodbye;
document.onkeydown = function () {
switch (event.keyCode || e.which) {
case 116 : //F5 button
validNavigation = true;
case 114 : //F5 button
validNavigation = true;
case 82 : //R button
if (event.ctrlKey) {
validNavigation = true;
}
case 13 : //Press enter
validNavigation = true;
}
}
// Attach the event click for all links in the page
$("a").bind("click", function () {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function () {
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function () {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function () {
wireUpEvents();
});

It's not pretty, but it did the trick.
var warnclose = true;
var warn = function(e) {
var warning = 'Your warning message.';
if (warnclose) {
// Disables multiple calls
warnclose = false;
// In case we still need warn to be called again
setTimeout(function(){
warnclose = true;
}, 500);
return warning;
}
};
window.onbeforeunload = warn;