When coding applications today, we are doing everything down on the browser to give the user a nice rich user experience. Often, we need to alert the user to some situation or ask the use a question.
The quick and dirty methods for doing this are to use the built-in JavaScript functions: alert() and confirm(). The problem is, these functions do not give you enough control over their look and feel, and they render differently on different browsers.
Below, you can see the effect of the following JavaScript in the different browsers installed on my development machine:
alert('Here!');
confirm('Are you sure?');
Chrome
IE9
Firefox
As you can see, each browser displays the code slightly different. If your web application happens to have a different color scheme, you can see how this would further serve to confuse an end user.
The replacements I use for these features in my application centers around jQuery’s dialog plug-in. The dialog plug-in is part of the jQuery UI library of extended input controls. What this means as far as “look and feel” is that if you use the jQuery UI library, then all of your controls are “skinnable” and will have a consistent look throughout your application.
http://jqueryui.com/demos/dialog/
What I am going to show next is how I wrote extensions to the dialogs to make them work more like the JavaScript functions alert() and confirm().
Using the extensions, we will get a consistent look and feel along with several other nice enhancements:
Chrome:
IE9:
Firefox:
First, on the page I put the following “<div>’s”:
<div id='dlgAlert'></div>
<div id='dlgConfirm'></div>
Alert Dialog (dlgAlert)
I then turn these divs into hidden dialogs. Let’s examine the code one at a time starting with the alert (the simpler of the two):
$('#dlgAlert').dialog({
autoOpen: false,
modal: true,
close: function (event, ui) {
$(this).text('');
},
open: function (event, ui) {
$(this).dialog('option', 'position', 'center');
},
buttons: {
'Ok': function () {
$(this).dialog('close');
var onOK = $(this).data('onOK');
//alert('onOK: ' + (typeof onOK));
if (onOK != null) onOK();
}
}
});
autoOpen: false
Tells jQuery to turn the div into a dialog box, but do not open the dialog until we tell it to.
modal: true
Tells jQuery that when we open the dialog, we want the users focus to ONLY be on the dialog, so jQuery will place a translucent background over the screen, then display the dialog and the user will not be able to interact with anything on the screen except the dialog.
close: function()
When jQuery closes the dialog, the contents will be cleared.
open: function()
When jQuery opens the dialog, the dialog box will be positioned in the center of the screen.
buttons: ‘Ok’
Similar to the JavaScript alert() function, the dialog box will display an ‘Ok’ button to the user so that they can read the message and click the “ok” button. The remainer of the Ok button code will be explained below.
Problem with Substituting a Dialog for alert()
Ok, so you may have noticed that in neither the “div”, not the dialog setup is there any “content”. If you were to simply open this dialog box at this point with:
$(‘#dlgAlert’).dialog(‘open’);
You would get just an empty box with an ‘Ok’ button on it. Additionally, we have another problem with the dialog box. In JavaScript, if we write the following code:
alert(‘I am here!’);
$.ajax(…);
When the JavaScript hits the alert() function, all processing STOPS until the user clicks the ‘Ok’ button. Only after the ‘Ok’ button is clicked will the $.ajax(…) call runs. However, if we substitute our dialog box for the alert() call like this:
$(‘#dlgAlert’).dialog(‘open’);
$.ajax(…);
The dialog box would open, but code execution would NOT stop and the $.ajax(…) call would be made. Clearly, this does not function like the JavaScript alert(), so we need to alter our thinking just a little.
dlgAlert() Function (replacement for JavaScript alert())
Here is the function that we call to make the dlgAlert dialog function close to the JavaScript alert() function:
function dlgAlert(title, msg, onOK) {
if (arguments.length < 3) onOK = null;
//alert('typeof onOK: ' + (typeof onOK));
$('#dlgAlert').data('onOK', onOK);
//alert('Added onOK');
$('#dlgAlert').html(msg)
.dialog('option', 'title', title)
.dialog('open');
}
If we call this function like this:
dlgAlert('Sample Title', 'Here!', function () { alert('You clicked Ok!'); });
We get a box that looks like this:
And when we click the ‘Ok’ button, we get the ugly JavaScript alert() box telling us that we clicked ‘Ok’:
So if we examine the code, we are passing the title (“Sample Title”), the message to be displayed (“Here!”) and the third parameter is a function to be called with the user clicks ‘Ok’ (function () { alert(‘You clicked Ok!’); }). So in our original example, rather than placing the $.ajax(…) call AFTER the dialog display, instead, we would place it in the onOk parameter like this:
dlgAlert('Sample Title', 'Here!', function () { $.ajax(…) });
Now the $.ajax(…) call will happen after the user clicks ‘Ok’ just like in the JavaScript alert() example.
The way this works is that when we call the dlgAlert() function, we add the onOk parameter to the dlgAlert div object using this line of code:
$('#dlgAlert').data('onOK', onOK);
Then, when the dialog opens and the user clicks ‘Ok’, this code will run:
'Ok': function () {
$(this).dialog('close');
var onOK = $(this).data('onOK');
//alert('onOK: ' + (typeof onOK));
if (onOK != null) onOK();
}
Notice that the code picks up the ‘onOk’ function from the div:
var onOK = $(this).data('onOK');
Then, if the value is not null, the function is called:
if (onOK != null) onOK();
Message Can Be HTML
Another benefit to using these jQuery dialog boxes is that you can place any HTML in your “Message”. For instance, the following dlgAlert() call:
dlgAlert('Sample Title',
'<div style="text-align: center">Center with <b>bold</b> text.</div>');
Produces:
A Little More Complicated:Confirm Dialog (dlgConfirm)
Ok… so hopefully you got all that from the dlgAlert() example. Let dive into the dlgConfirm dialog. First, the initialization of the dialog:
$('#dlgConfirm').dialog({
autoOpen: false,
modal: true,
close: function (event, ui) {
$(this).text('');
},
open: function (event, ui) {
var width = $(this).data('width');
if (width > 0) $(this).dialog("option", "width", width);
var delayTimer = null;
var delay = $(this).data('delay');
if (delay > 0) {
var html = $(this).html();
html += "<br /><div style='text-align: center;'>Time Left: <span id='delaytimer'></span></div><br />";
$(this).html(html);
var onNo = $(this).data('onNo');
delayTimer = new Timer('delaytimer', delay, function () { $('#dlgConfirm').dialog('close'); onNo(); });
}
$(this).data('delayTimer', delayTimer);
$(this).dialog('option', 'position', 'center');
},
buttons: {
'Yes': function () {
$(this).dialog('close');
var onYes = $(this).data('onYes');
//alert('onOK: ' + (typeof onOK));
if (onYes != null) onYes();
},
'No': function () {
$(this).dialog('close');
var onNo = $(this).data('onNo');
//alert('onOK: ' + (typeof onOK));
if (onNo != null) onNo();
}
}
});
So, I’m not going through all of the code line by line as its very similar to the alert code. The difference highlights are:
1) There is a width parameter for expanding the dialog box
2) There is a delay parameter that will allow the dialog to display for a set period
3) There are 2 buttons: Yes and No (instead of Ok Cancel in the JavaScript version)
dlgConfirm() Function (Replacement for JavaScript confirm())
function dlgConfirm(title, msg, onYes, onNo, width, delay) {
if (arguments.length < 3) onYes = null;
if (arguments.length < 4) onNo = null;
if (arguments.length < 5) width = 0;
if (arguments.length < 6) delay = 0;
//alert('dlgConfirm() - START');
$('#divLoading').hide();
$('#dlgConfirm').data('onYes', onYes);
$('#dlgConfirm').data('onNo', onNo);
$('#dlgConfirm').data('width', width);
$('#dlgConfirm').data('delay', delay);
//alert('Added onOK');
$('#dlgConfirm').html(msg)
.dialog('option', 'title', title)
.dialog('open');
}
The code for the dlgConfirm call takes more parameters. The first 2 are the same as the alert call: Title and Message. Obviously, for the message, you want to end the message in the form of a question that can be answered as a Yes or No.
The next 2 parameters: onYes and onNo are function calls that are called when the user presses either the Yes or No buttons respectively. To “skip” these parameters, simply pass a null for those parameters.
The next parameter is the width. By default, the dialog box options with a default width, but you might want to adjust that to better fit your message text. to skip this parameter, pass a 0 as the width and it will be ignored.
The final parameter is the delay parameter. To use this parameter, you will need an additional piece of code that I will place at the bottom of this article. The delay feature is something that the JavaScript function does not have. It allows the dialog to appear for a specified period of time and, if the user does not select Yes or No in that time period, the delay will time out and call the “onNo” function as if the user selected that button. I will write another blog about how to use this feature to create an auto-logout for your application.
Calling dlgConfirm()
A sample dlgConfirm() call will look like this:
dlgConfirm(
'Sample Title',
'Do you want to continue?',
function() { alert('You clicked YES!'); },
function() { alert('You clicked NO!'); },
500,
0);
Which results in a dialog that looks like this:
Pressing Yes:
Pressing No:
Delay Parameter – Timer Code
To understand and user the “delay” parameter of the dlgConfirm() function, please read my next Blog post. For completeness, I will include the Time code here:
Timer.prototype = {
intvFunc: function () {
$(this.id).text(this.formatTime(--this.timer));
if (this.timer === this.limit) {
clearInterval(this.intv);
this.callback.call(this);
}
},
formatNum: function (n) {
return n < 10 ? '0' + n : n;
},
formatTime: function (n, m, s) {
s = n % 60;
m = (n - s) / 60;
//return (m + (n > 0 ? 1 : 0)) + ' minute' + ((m > 0 || n == 0) ? 's' : '');
return [this.formatNum(m), ':', this.formatNum(s)].join('');
},
stopTimer: function () {
clearInterval(this.intv);
},
resetTimer: function () {
this.timer = this.minLimit * 30;
}
};
![image_thumb[14]_thumb](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNMYCGSoE0PzwsNoRNaABMswbHfVR2vv7ByUjOPRe_jXw_WE3saKZU_Xo_KxmWcA2-kvWS5JjWBVY4ravOwkJgzZ-AoHKKBVYAMgFrjUrPJ3fp8sgJBd1W6VMAAmcqa6YXTV5_Sq2mh1Os/s1600-h/image_thumb14_thumb2.png "image_thumb[14]_thumb")