How to warn the user that all unsaved changes will be lost when he is leaving the page Part 3

Here is some progress on my jQuery plugin for warning a user when he is leaving the page and there are unsaved changes.

    1 // Version 0.2

    2 // April 10 2011 22:54

    3 // Julian Vargas

    4 // http://gr8code.blogspot.com

    5 

    6 (function () {

    7     var userIsEditing = false;

    8     var message = "Do you really want to abandon this page?, unsaved changes will be lost.";

    9     var controlsToObserve = ":input, :text, :password, :radio, :checkbox, select";

   10     var eventsToObserve = "keyup change";

   11 

   12     // the function is declared as a 'var' for DRY.

   13     var confirmation = function (event) {

   14         if (userIsEditing && !confirm(message))

   15             event.preventDefault();

   16     }

   17 

   18     $("a").click(confirmation);

   19     $(window).unload(confirmation);// This still needs improvements

   20 

   21     $(controlsToObserve).bind(eventsToObserve, function () { userIsEditing = true; });

   22 

   23 })();

How to warn the user that all unsaved changes will be lost when he is leaving the page Part 2

I come back to show some progress on How to warn the user that all unsaved changes will be lost when he is leaving the page. This is my current implementation.

    1 //Version 0.1

    2 //April 10 2011 22:54

    3 //Julian Vargas

    4 //http://gr8code.blogspot.com

    5 (function () {

    6     var userIsEditing = false;

    7     var message = "Do you really want to abandon this page?, unsaved changes will be lost."

    8 

    9     $("a").click(function (event) {

   10         if (userIsEditing)

   11             if (!confirm(message))

   12                 event.preventDefault();

   13     });

   14 

   15     $(":input, :text, :password, :radio, :checkbox").bind("keyup", function () {

   16         userIsEditing = true;

   17     });

   18 

   19 })();

How to warn the user that all unsaved changes will be lost when he is leaving the page

Recently I was asked to implement the following requirement in all my webforms:
"When the user is leaving a page, the application must show a confirm dialog warning the user that if he leaves the page, will lose all unsaved changes"
I decided to implement this with jQuery because I already have included the reference in all my webforms as well as some standard scripts which I use through out my applications.

What I did was add the next lines to an existing script file:


var isEditing = false;
$(document).ready(function () {
  $(":input, :text, :password, :radio, :checkbox")
    .bind("keyup change",function () {
         isEditing = true;
    });


  $("a").click(function (event) {
    if(isEditing)
       if(!confirm("Warning message"))
          event.preventDefault();
  });
});

Certainly this Code Saved the Day, but giving a closer look at this code one can note some issues to bear in mind:
-Global variables are not a good practice
-The dialog does not show up when the user close the window
-The dialog does not show up when the user clicks a button

I will fix these issues shortly, perhaps by implementing the appropriate jQuery plug-in.

My lovely table

This project is a
jQuery plugin for displaying tabular data into html tables, this was inspired
by some personal needs but it is aimed at satisfying all the patterns described
in the post
Ultimate guide to table UI patterns by Janko Jovanovic,
Ultimate guide to table UI patterns by Theresa Neil,
15 tips for designing terrific tables by Joshua Johnson and
The big table issue by Jin. The plugin is going to be delivered
progresively as the following requirements are satisfied.


Requirements

• Alternating row styling
• Full row selection
• Table sections: Grouping relateddata
• Sorting
• Filtering
• Pagination
• Continious scrolling: As a constrast to pagination, shows new rows when scrolling
  down
• Fiex table header
• Headerless table
• Expandable rows
• Row actions
• Inline actions: at the beginning or the end of the row.
• Hover actions: display a menu somewhere in the data when certain event occurs.
• Actions on multiple rows
• Inline editing

Another important requirement is to allow the footer to contain controls for adding
new rows to the table