In this article I will explain with an example, how to close (hide)
jQuery UI Dialog Modal Popup after
AJAX call is successful (completed) in ASP.Net using C# and VB.Net.
HTML Markup
The HTML Markup consists of following elements:
DIV – For displaying Modal Popup.
TextBox – For capturing user input.
IMG – For displaying Loader image.
Button – For making
AJAX call.
<div id="dialog" style="display:none">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Name:</td>
<td><input type="text" id="txtName" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<img id="imgLoader" alt="" src="loading.gif" style="visibility:hidden" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
</div>
Namespaces
You will need to import the following namespaces.
C#
using System.Threading;
using System.Web.Services;
VB.Net
Imports System.Threading
Imports System.Web.Services
WebMethod (PageMethod)
The
WebMethod accepts TextBox value as a parameter.
Inside this
WebMethod, Sleep method of
Thread class is called which delays the execution of code for 2 seconds.
Finally, the TRUE is returned.
C#
[WebMethod]
public static bool SubmitDetails(string name)
{
//Fake Delay.
Thread.Sleep(2000);
return true;
}
VB.Net
<WebMethod>
Public Shared Function SubmitDetails(ByVal name As String) As Boolean
Thread.Sleep(2000)
Return True
End Function
Closing (Hide) jQuery Dialog Modal Popup after AJAX Call Success (Completed)
Inside the HTML Markup, the following CSS file is inherited.
1. jquery-ui.css
Then, the following script files are inherited.
1. jquery.min.js
2. jquery-ui.js
Inside the
jQuery document ready event handler, first the dialog method is applied to the HTML DIV and some properties are set i.e.
autoOpen,
modal,
title.
Then,
jQuery click event handler is assigned to the Button inside which the
visibility property of Image element is set to
visible.
After that, an
AJAX call is made to the
SubmitDetails WebMethod (Explained earlier) where value of the TextBox is passed as data.
Finally, inside the Success event handler the visibility property of Image element is set to hidden and Modal Popup is closed using dialog function which accepts close keyword as parameter.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: true,
modal: true,
title: "Submit Details"
});
$("#btnSubmit").click(function () {
$("#imgLoader").css("visibility", "visible");
$.ajax({
type: "POST",
url: "Default.aspx/SubmitDetails",
data: "{name: '" + $("#txtName").val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$("#imgLoader").css("visibility", "hidden");
$("#dialog").dialog("close");
}
});
});
});
</script>
Screenshot
![Close (Hide) jQuery Dialog Modal Popup after AJAX Call Success (Completed)]()
Demo
Downloads
