In this article I will explain how to show jQuery UI Dialog modal popup after jQuery AJAX call is completed inside the Success event handler in ASP.Net.
The jQuery UI Dialog is initialized before the jQuery AJAX call but it is shown on the page after the response is received by the jQuery AJAX call.
HTML Markup
The below HTML Markup consists of a TextBox to enter some content, a Button for triggering jQuery AJAX call and a DIV for displaying jQuery Dialog.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Name:
</td>
<td>
<input type="text" id="txtName" value="" />
</td>
</tr>
<tr>
<td>
<input type="button" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
<div id="dialog" style="display: none">
</div>
The WebMethod
In order to illustrate the functioning, I’ll be making use of an ASP.Net WebMethod which will simply return the name sent by the jQuery AJAX call back as response. But this solution is not restricted only to ASP.Net and it can be easily used for other technologies too.
[System.Web.Services.WebMethod]
public static string SendParameters(string name)
{
return string.Format("Name: {0}", name);
}
Open (Show) jQuery Dialog Modal Popup after AJAX Call inside its Success event handler
Inside the document ready event handler, I have applied the jQuery Dialog Modal Popup plugin to the DIV.
When the Button is clicked a jQuery AJAX call is made to the WebMethod and inside the success event handler the value received from the server is displayed in the DIV and then the jQuery Dialog Modal Popup is opened.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "Details",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
$("#btnSubmit").click(function () {
$.ajax({
type: "POST",
url: "Default.aspx/SendParameters",
data: "{name: '" + $("#txtName").val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$("#dialog").html(r.d);
$("#dialog").dialog("open");
}
});
});
});
</script>
![Open (Show) jQuery Dialog Modal Popup after AJAX Call Success]()
Demo
Downloads
Download Code
