In this article I will explain how to dynamically load (populate) contents of jQuery UI Dialog Modal Popup using jQuery AJAX.
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);
}
Load (Populate) jQuery UI Dialog Modal Popup content dynamically using AJAX
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
