Before we begin, allow me to show you the structure of my
project. You are welcome to download this demo.
Figure 1
Demo 1 – Without Validation Control
Here is the content of Jscript.js:
Listing 1
function disableBtn(btnID, newText) {
var btn = document.getElementById(btnID);
setTimeout("setImage('"+btnID+"')", 10);
btn.disabled = true;
btn.value = newText;
}
//using absolute url for image to avoid complication
function setImage(btnID) {
var btn = document.getElementById(btnID);
btn.style.background = 'url(http://images.ysatech.com/ajax-loader.gif)';
}Here is part of the Default.aspx page content:
Listing 2
<table>
<tr>
<td>
<td>
<asp:button id="btnOne" tabIndex="0"
Runat="server" Text="Submit"
onclick="btnOne_Click"
OnClientClick="disableBtn(this.id, 'Submitting...')"
UseSubmitBehavior="false" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label3"
runat="server" Text=""></td>
</tr>
</table>
<script type="text/javascript" src="JScript.js"></script>
For testing purposes, I included these lines in
default.aspx.cs:
Listing 3
<span lang=CS>protectd void btnOne_Click(object sender, EventArgs e)</span>
<span lang=CS>{</span>
<span lang=CS> Thread.Sleep(2000);</span>
<span lang=CS> Label3.Text = DateTime.Now.ToLongTimeString();</span>
<span lang=CS>}</span>In the Default.aspx page, I have a Button and a Label
control. Let's take a closer look at the button attributes.
·
OnClientClick="disableBtn(this.id, 'Submitting...')" -
Calls the JavaScript function by passing in the button ID and the new text
value that I want it to display on click event. The JavaScript will gray out
the button, set new text ('processing…') and display Ajax loading background
image.
·
UseSubmitBehavior="false" - Indicates that the button
control should use the ASP.NET postback mechanism instead of the client
browser's submit mechanism (UseSubmitBehavior property).
Here is how the button will look like when someone clicks on
it:
Figure 2
Figure 3
Demo 2 – With Validation Control
Here is the output from Default2.aspx:
Figure 4
Oops... The button is still disabled after it failed the
validation process. Let's modify the JavaScript to fix this problem.
Figure 5
Here is the content of the new JavaScript file with comments
– JScript2.js:
Listing 4
function disableBtn(btnID, newText) {
var btn = document.getElementById(btnID);
var oldValue = btn.value;
btn.disabled = true;
btn.value = newText;
if (HasPageValidators()) {
if (Page_Validators != undefined && Page_Validators != null) {
//Looping through the whole validation collection.
for (var i = 0; i < Page_Validators.length; i++) {
ValidatorEnable(Page_Validators[i]);
//if condition to check whether the validation was successfull or not.
if (!Page_Validators[i].isvalid) {ResetToDefault(btn, oldValue); break; }
else {
var isValidationOk = Page_IsValid; EnableOnUnload(btn, btn.value);
if (isValidationOk !== null) {
//page valid
if (isValidationOk) {
SetImage(btn);
break;
}
else { //page not valid
btn.disabled = false;
}
}
}
}
}
}
else {
SetImage(btn);
btn.disabled = true; btn.value = newText;
EnableOnUnload(btn, btn.value);
}
}
function ResetToDefault(btn, oldValue) {
btn.disabled = false;
btn.value = oldValue;
}
//Handle Page_Validators is not defined error
function HasPageValidators() {
var hasValidators = false;
try {
if (Page_Validators.length > 0) {
hasValidators = true;
}
}
catch (error){}
return hasValidators;
}
function SetImage(btn) {
btn.style.background = 'url(http://images.ysatech.com/ajax-loader.gif)';
}
//enable the button and restore the original text value for browsers other than IE
function EnableOnUnload(btn, btnText) {
if (navigator.appName !== 'Microsoft Internet Explorer') {
window.onunload = function() {
ResetToDefault(btn, btnText);
}
}
}In the JavaScript function disableBtn,
first I check if the page contains any validation controls else set the
background image, text, disable the button and call the function EnableOnUnload. I found out that, in Firefox, if we hit the
button and continue to the next page, and then hit the Back button (or
javascript:history(-1);)... the button control is still disabled. The purpose
of the function EnableOnUnload is to enable the
button and restore the original text value during the onunload
event for browsers other than IE. If the page have validation controls and fail
the validation process, do not disable the button else set the background
image, text, disable the button and call the function EnableOnUnload.
Output from using the new JavaScript (JScript2.js), when
fail validation process:
Figure 6
Figure 7
Figure 8
