One of the common issues associated with
using jQuery in Asp.Net is the post back issue. jQuery operates in the client
side, while the Asp.Net server side buttons trigger the postback by default,
hence we need to stop the postback for the jQuery to function.
Postback can be disabled by adding the
following line to the function which handles the click event of the server side
button.
{
event.preventDefault();
....
});
Full example code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Dialog</title>
<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
<script type="text/javascript" src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet"
/>
<style type="text/css">
.ui-dialog
.ui-dialog-buttonpane
{
text-align:
left;
}
.ui-dialog
.ui-dialog-buttonpane .ui-dialog-buttonset
{
float:
none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var
confirm = function() { alert('Yes Button Clicked'); }
var
cancel = function() { alert('No Button Clicked'); }
$('#cmdShowDialog').click(function(event)
{
event.preventDefault();
$('#myDialog').dialog
(
{
modal: true,
close: function(event, ui){alert('Dialog
Closed');},
buttons:
[
{
text: "Yes",
click:
confirm
},
{
text: "No",
click:
cancel
}
]
}
);
});
$('#cmdHideDialog').click(function() {
$('#myDialog').dialog('close');
});
});
</script>
</head>
<body>
<div id="myDialog" style="display:none;" title="Hello
Dialog">
Please Select Yes/No to Proceed. <br /><br
/>
</div>
<form id="frmDialog" runat="server">
<div>
<asp:Button
ID="cmdShowDialog"
runat="server"
Text="Show Dialog" />
<input type="button"
id="cmdHideDialog"
value="Hide Dialog" />
</div>
</form>
</body>
</html>
Run the application, click on the Show
Dialog button, the Dialog will get displayed as follows.
Note that the cmdShowDialog button is a server side button and the function which handles its click event has the line event.preventDefault(); to disable the postback.
The button cmdHideDialog is a client side button; hence this is not required here.
1 comment:
This is really nice artivle. Thanks
check the below link also
http://www.dotnetpools.com/Article/ArticleDetiail/?articleId=25&title=Disable All Controls On Postback Using Jquery In Asp.net
Post a Comment