Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Actually Javascript can tell you if a Tab is going to be closed. Two different methods need to be used (one for IE and one for everyone else).</p> <p>I wrote a Javascript process to do just what you are asking. Pre-requisites for the process is jQuery and one plugin (livequery - because some of the HTML is dynamically generated after page load). Anyway, here is the js file that does all this (checkclosing.js):</p> <pre><code>// Global Var var bodyclicked = false; var datachanged = false; var nodirtycheck = false; // Start the engines :) $(document).ready(function () { init(); }); function init() { bindEvents(); } function bindEvents() { // Bind the onClick event for the DOM body $(document).livequery(function () { bodyclicked = true; }); // Bind our event handlers for the change and reset events $(':input').not('.excludeFromDirtyCheck').bind('change', function () { if ($(this).hasClass('dataLoader')) { if (!datachanged) { return; } } datachanged = true; $(".hidDataChanged").val("True"); }); $(':reset,:submit').bind('click', function () { // .NET renders some ASP Buttons as Submit and Reset types if ($(this).hasClass('notSubmit')) { return; } if ($(this).hasClass('notReset')) { return; } datachanged = false; $(".hidDataChanged").val("False"); }); // Must have the livequery plugin referenced for this to work $('.resetchangedform').livequery('click', function (event) { //alert("resetchanged"); // FIXME datachanged = false; // Set our hidden input (on the Administration Master page) $(".hidDataChanged").val("False"); }); // Must have the livequery plugin referenced for this to work $('.setchangedform').livequery('click', function (event) { //alert("setchanged"); // FIXME datachanged = true; // Set our hidden input (on the Administration Master page) $(".hidDataChanged").val("True"); }); // Must have the livequery plugin referenced for this to work $('.excludeFromDirtyCheck').livequery('click', function (event) { nodirtycheck = true; }); // Must have the livequery plugin referenced for this to work $('.notSubmit').livequery('click', function (event) { nodirtycheck = true; }); // Must have the livequery plugin referenced for this to work $('.dataReloader').livequery('change', function (event) { nodirtycheck = true; }); window.onbeforeunload = function () { //alert("datachanged = " + datachanged + " | nodirtycheck = " + nodirtycheck + " | hidDataChanged = " + $(".hidDataChanged").val()); // Check the hidden textbox if ($(".hidDataChanged").val() == "True") { datachanged = true; } if (nodirtycheck) { nodirtycheck = false; } else { if (navigator.appName == "Microsoft Internet Explorer") { // IE if (bodyclicked) { if (datachanged) { return "You may have unsaved changes..."; } } else { bodyclicked = false; // Do Nothing } } else { // Not IE if (datachanged) { return "You may have unsaved changes..."; } else { // Do Nothing } } //if (navigator.appName == "Microsoft Internet Explorer") { } //window.onbeforeunload = function () { } // if (nodirtycheck) { } </code></pre> <p>Then just include a reference to this file on any page you want to check for a tab close on:</p> <p>This was built to help prevent users from navigating away from pages with unsaved changes to form values. Yes, I know that most of the time, it is bad practice to prevent the user from closing a tab or navigating away, but in this case - the users requested it and this is an internal application that is not for public consumption.</p> <p>Any controls that you don't want to be checked for changes prior to letting the user close the tab or navigate away would just be given a class name of excludeFromDirtyCheck.</p> <p>This may be more than you need, but you can strip off the parts that aren't useful. The basic premise is the same.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload