Critical Developers

Programmers Knowledge Base

Solved - jQuery UI Dialog not working in asp.net/ server control not post back using UpdatePanel in jQuery Dialog

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]-----------

Comments (4) -

  • naji

    09-09-2014 12:50:21 | Reply

    its very helpfull

  • architectenbureau

    25-01-2015 20:07:48 | Reply

    I wouldn't say that I wholeheardetly agree but there is some sense to this. On a side note, is this a Wordpress site?

  • Rm6@gmail.com

    05-02-2015 11:54:13 | Reply

    I simply want to say I am just new to weblog and honestly liked this web site. Very likely I’m planning to bookmark your website . You absolutely come with remarkable writings. Thanks a lot for revealing your blog.

Loading