In My Code I have implemented jQuery validation ...
Next I add the following Code to display Loading Images when Page Post Back, but this Code is showing at the tme of Loading of the Page..
How to solve this issue ?
Followed URL :
http://www.aspsnippets.com/Articles/Display-loading-progress-image-when-Page-Loads-or-does-PostBack-using-ASPNet.aspx#
Code
Protected Sub Submit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
System.Threading.Thread.Sleep(5000)
ScriptManager.RegisterClientScriptBlock(TryCast(sender, Button), Me.[GetType](), "alert", "alert('Form has been submitted.');", True)
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim script As String = "$(document).ready(function () { $('[id*=Button1]').click(); });"
ClientScript.RegisterStartupScript(Me.GetType, "load", script, True)
End Sub
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
body
{
font-family: Arial;
font-size: 10pt;
margin:0;
}
input, select
{
width: 150px;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
#progress
{
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
width: 100%;
height: 100%;
position: fixed;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID = "UpdatePanel1" runat="server">
<ContentTemplate>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th colspan="2">
Please fill the following Form
</th>
</tr>
<tr>
<td style="height: 20px">
</td>
</tr>
<tr>
<td>
Name:
</td>
<td>
<asp:TextBox ID="txtName" runat="server" CssClass="validate[required]" Text = "" />
</td>
</tr>
<tr>
<td style="height: 20px">
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" CssClass="validate[required,custom[email]]" Text = "" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="Button1" Text="Submit" runat="server"/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</form>
<link href="//cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/languages/jquery.validationEngine-en.js"
charset="utf-8"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/jquery.validationEngine.js"
charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$("#form1").validationEngine('attach', { promptPosition: "topRight" });
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_initializeRequest(function (sender, e) {
if (!$("#form1").validationEngine('validate')) {
e.set_cancel(true);
}
});
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
$("#form1").validationEngine('attach', { promptPosition: "topRight" });
}
});
};
</script>
</div>
</form>
</body>
</html>
