1) Why jQuery UI Dialog not working in asp.net ? or Why server control in jQuery UI Dialog not working ?
Soln:-
In "open" callback of jQuery Dialog we need to add below line so that it can run under asp.net form -
$(this).parent().appendTo("form");
2) Why server control not post back after using UpdatePanel in jQuery Dialog ?
Soln:-
Set "ChildrenAsTriggers" attribute of UpdatePanel to true.
eg.: <asp:UpdatePanel ID="upSearch" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
- Please refer the following sample code:-
Pre-requisites to use jQuery Dialogs:-
<!-- [Styles] -->
<link rel="Stylesheet" type="text/css" href="jquery-ui.css" />
<!-- [Scripts] -->
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
The HTMLization we need to make Dialog:-
<!-- [MARKUPS] -->
<a href="#" title="Open Dialog" onclick="showDialog();">Click to Open Dialog</a>
<!-- Start Dialog -->
<div id="jqdialog" style="display:none;">
<asp:UpdatePanel ID="upSearch" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtSearch" runat="server" MaxLength="50" />
<asp:Button ID="btnSubmit" runat="server" Text="Search" Width="90" OnClick="btnSubmit_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<!-- End Dialog -->
<!-- [MARKUPS END HERE] -->
Function to call/open Dialog:-
function showDialog() {
var $dialogContent = $("#jqdialog");
$dialogContent.dialog({
height: 450,
width: 400,
modal: true,
title: "My Form",
open: function (type, data) {
$(this).parent().appendTo("form");
},
buttons: {
Close: function () {
$(this).dialog('destroy');
}
},
close: function () {
$(this).dialog('destroy');
}
});
}
---[END]-----------