ASP.NET button postback with jQuery UI Dialog

Problem

On my ASP.NET page, I have a jQuery UI Dialog that works great:

jQuery(function() {
    jQuery("#dialog").dialog({
        draggable: true,
        resizable: true,
        show: 'Transfer',
        hide: 'Transfer',
        width: 320,
        autoOpen: false,
        minHeight: 10,
        minwidth: 10
    });
});

jQuery(document).ready(function() {
    jQuery("#button_id").click(function(e) {
        jQuery('#dialog').dialog('option', 'position', [e.pageX + 10, e.pageY + 10]);
        jQuery('#dialog').dialog('open');
    });
});

My div:

<div id="dialog" style="text-align: left;display: none;">
    <asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" />
</div>

However, the btnButton Click function is never called… What can I do about it?

More information is available at: I added this code to move div to form:

jQuery("#dialog").parent().appendTo(jQuery("form:first"));

But it’s still not working…

Asked by Paul

Solution #1

You’re almost there; all you need is the right object. This is how it should be:

jQuery(function() {
    var dlg = jQuery("#dialog").dialog({
                         draggable: true,
                         resizable: true,
                         show: 'Transfer',
                         hide: 'Transfer',
                         width: 320,
                         autoOpen: false,
                         minHeight: 10,
                         minwidth: 10
                     });
    dlg.parent().appendTo(jQuery("form:first"));
});

Answered by Robert MacLean

Solution #2

$('#divname').parent().appendTo($("form:first"));

This code cured my problem and was compatible with all browsers, including Internet Explorer 7, Firefox 3, and Google Chrome. I’m growing fond of jQuery… It’s an interesting framework.

I also tested with partial render, which was just what I needed. Great!

<script type="text/javascript">
    function openModalDiv(divname) {
        $('#' + divname).dialog({ autoOpen: false, bgiframe: true, modal: true });
        $('#' + divname).dialog('open');
        $('#' + divname).parent().appendTo($("form:first"));
    }

    function closeModalDiv(divname) {
        $('#' + divname).dialog('close');
    }
</script>
...
...
<input id="Button1" type="button" value="Open 1" onclick="javascript:openModalDiv('Div1');" />
...
...
<div id="Div1" title="Basic dialog" >
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
          postback test<br />
          <asp:Button ID="but_OK" runat="server" Text="Send request" /><br />
          <asp:TextBox ID="tb_send" runat="server"></asp:TextBox><br />
          <asp:Label ID="lbl_result" runat="server" Text="prova" BackColor="#ff0000></asp:Label>
        </ContentTemplate>
    <asp:UpdatePanel>
    <input id="Button2" type="button" value="cancel" onclick="javascript:closeModalDiv('Div1');" />
</div>

Answered by Marco

Solution #3

FWIW, the form:first technique didn’t work for me.

However, the strategy described in that blog post worked:

http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html

Adding the following to the dialog declaration:

  open: function(type,data) {
    $(this).parent().appendTo("form");
  }

Answered by ken

Solution #4

In jQuery UI v1.10, there is an additional setting to be aware of. To address the ASP.NET workaround you’re using to re-add the element to the form, an appendTo setting has been added.

Try:

$("#dialog").dialog({
     autoOpen: false,
     height: 280,
     width: 440,
     modal: true,
     **appendTo**:"form"
});

Answered by Mike

Solution #5

Ken’s response above worked for me. The problem with the accepted solution is that it only works if the page only has one modal. If you have many modals, you’ll need to do it inline, rather than after the fact, in the “open” param while initializing the dialog.

open: function(type,data) { $(this).parent().appendTo("form"); }

If you use many modals like the first accepted answer suggests, you’ll only get the last modal on the page to properly fire postbacks, not all of them.

Answered by nickb

Post is based on https://stackoverflow.com/questions/757232/jquery-ui-dialog-with-asp-net-button-postback