Overriding OS alerts and confirms using jQuery

I have recently been tasked with unifying the look and feel of a large application. The application makes use of the jQuery dialog for notifications as ajax operations process but there are a large number of places where the application uses OS alerts and confirms.

You cannot just replace these calls with a dialog because displaying the dialog does not stop downstream processing like alerts and confirms do. In the alert case this is usually not important unless you have code like:

alert("Sending you to google");
location.href="http://www.google.com";

In the above case you will go toodling off to google before the replacement for the alert has been dismissed. Fortunately in our application this use case doesn't occur so replacing the alert with a dialog works fine.

Replacing the alert window

The following will replace the native alert with a jQuery dialog (jqwindow is a plugin wrapper for the dialog):

$(document).ready(function (){
	window.alert=function(mess){
		$("#modal").jqwindow("alert",mess);
	};
     }
);

Unfortunately the above approach does not work in IE. IE will not let you override the native alert function so you have to change all the alerts in your code line with a new function like jqAlert.

Replacing the confirm window

The confirm window is more complicated because we absolutely have to stop processing until the user responds to the dialog. Fortunately we can use queuing in jQuery by:

1. pushing the dialog onto the queue
2. pushing the function to be executed when the dialog closes onto the queue
3. dequeuing the dialog when it closes
4. dequeuing the next function after it executes.

Sample code

$(document).ready(function (){
   $(".confirm").click(function(){
     $("#modal3").jqwindow("confirm",{message:"After this dialog is confirmed an alert will fire",nextFunction:function(){
        $(this).dequeue();
	if($(this).data("returnValue")){   //the wrapper will set the user response in the data of the element
	  $("#modal3").jqwindow("alert","Confirmation ACK");
	}else{
	   $("#modal3").jqwindow("alert","NACK on confirmation");
	}
     }
    }
   );  //closes jqwindow call
  });  //closes onclick definition
}); //closes document.ready
      

• Demo
• The jqwindow plug-in (right click save as)

Comments or suggestions appreciated.