299

I have a jQuery UI Dialog working great on my ASP.NET page:

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>

But the btnButton_Click is never called... How can I solve that?

More information: I added this code to move div to form:

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

But still without success...

Improve this question
2

17 Answers 17

Reset to default
315

You are close to the solution, just getting the wrong object. It should be like this:

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"));
});
Improve this answer
1
  • what if it has a modal option set to true? in my case the solution is perfect, but without the modal - with the modal, the div created for the modal effect is place over the dialog with the parent() method
    – SammuelMiranda
    Commented Sep 11, 2018 at 14:25
37 
$('#divname').parent().appendTo($("form:first"));

Using this code solved my problem and it worked in every browser, Internet Explorer 7, Firefox 3, and Google Chrome. I start to love jQuery... It's a cool framework.

I have tested with partial render too, exactly what I was looking for. 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>
Improve this answer
1
  • This full example helped me piece together what I was missing when encountering this problem. Thanks!
    – Dillie-O
    Commented Apr 13, 2011 at 23:24
34

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

However, the technique in that blog article did:

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

Specifically, adding this to the dialog declaration:

  open: function(type,data) {
    $(this).parent().appendTo("form");
  }
Improve this answer
4
  • 1
    if you don't do it in a update panel, this method is the only way I could get my buttons (which I want to do a full postback) to work.
    – Merritt
    Commented Jun 25, 2010 at 19:39
  • +1 for this this is the only code the worked for me. im not using update panel. THANK YOU!!! saved my day!
    – Albert Laure
    Commented Nov 21, 2013 at 5:49
  • +1: This worked for me when the solutions above did not work. And I am using the UpdatePanel.
    – Vivian River
    Commented Oct 3, 2014 at 18:00
  • The simplest and best solution to getting the Dialog box back into the Form for PostBack behavior.
    – GoldBishop
    Commented Oct 3, 2017 at 12:10
29

Be aware that there is an additional setting in jQuery UI v1.10. There is an appendTo setting that has been added, to address the ASP.NET workaround you're using to re-add the element to the form.

Try:

$("#dialog").dialog({
     autoOpen: false,
     height: 280,
     width: 440,
     modal: true,
     **appendTo**:"form"
});
Improve this answer
3
  • This doesn't work for me with 2 jquery dialogs on the same page. I wish it would as it's the right solution.
    – Matthew Lock
    Commented Sep 6, 2013 at 3:28
  • 3
    The parent().appendTo("form") techniques did not work with a modal dialog because the overlay div stays outside the form and ends up covering the dialog (rendering it inoperable). By using this new appendTo property with jquery 1.10, the overlay div was put in the right place, so the modal dialog worked correctly.
    – humbads
    Commented Mar 19, 2014 at 19:14
  • This should be the correct answer now because jquery UI library has been updated to add appendTo setting. Thank you @Mike saved me lot of time.
    – AJP
    Commented Jan 13, 2015 at 23:51
25

ken's answer above did the trick for me. The problem with the accepted answer is that it only works if you have a single modal on the page. If you have multiple modals, you'll need to do it inline in the "open" param while initializing the dialog, not after the fact.

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

If you do what the first accepted answer tells you with multiple modals, you'll only get the last modal on the page working firing postbacks properly, not all of them.

Improve this answer
1
  • 1
    +1 Absolutely true. Fixed my problem for me. But why is it necessary? I can't figure that out.
    – Colin
    Commented Sep 9, 2011 at 16:07
21

Primarily it's because jQuery moves the dialog outside of the form tags using the DOM. Move it back inside the form tags and it should work fine. You can see this by inspecting the element in Firefox.

Improve this answer
9
  • I moved it inside form : jQuery("#dialog").parent().appendTo(jQuery("form:first")); But the problem still there...
    – Paul
    Commented Apr 16, 2009 at 17:57
  • You aren't registering any other jquery events on the btnButton object are you?
    – Chad Ruppert
    Commented Apr 16, 2009 at 18:03
  • and when are you putting it back in the form? immediately after open?
    – Chad Ruppert
    Commented Apr 16, 2009 at 18:08
  • jQuery(function() { jQuery("#dialog").dialog({ draggable: true, resizable: true, show: 'Transfer', hide: 'Transfer', width: 320, autoOpen: false, minHeight: 10, minwidth: 10 }); jQuery("#dialog").parent().appendTo(jQuery("form:first")); }); is what it should be.
    – Chad Ruppert
    Commented Apr 16, 2009 at 18:11
  • and still no joy? at the very least when you click the button, if in a form, it should cause a post. Are you getting JS errors at all? The modal is not closing or anything?
    – Chad Ruppert
    Commented Apr 16, 2009 at 18:34
8

I didn't want to have to work around this problem for every dialog in my project, so I created a simple jQuery plugin. This plugin is merely for opening new dialogs and placing them within the ASP.NET form:

(function($) {
    /**
     * This is a simple jQuery plugin that works with the jQuery UI
     * dialog. This plugin makes the jQuery UI dialog append to the
     * first form on the page (i.e. the asp.net form) so that
     * forms in the dialog will post back to the server.
     *
     * This plugin is merely used to open dialogs. Use the normal
     * $.fn.dialog() function to close dialogs programatically.
     */
    $.fn.aspdialog = function() {
        if (typeof $.fn.dialog !== "function")
            return;

        var dlg = {};

        if ( (arguments.length == 0)
                || (arguments[0] instanceof String) ) {
            // If we just want to open it without any options
            // we do it this way.
            dlg = this.dialog({ "autoOpen": false });
            dlg.parent().appendTo('form:first');
            dlg.dialog('open');
        }
        else {
            var options = arguments[0];
            options.autoOpen = false;
            options.bgiframe = true;

            dlg = this.dialog(options);
            dlg.parent().appendTo('form:first');
            dlg.dialog('open');
        }
    };
})(jQuery);</code></pre>

So to use the plugin, you first load jQuery UI and then the plugin. Then you can do something like the following:

$('#myDialog1').aspdialog(); // Simple
$('#myDialog2').aspdialog('open'); // The same thing
$('#myDialog3').aspdialog({title: "My Dialog", width: 320, height: 240}); // With options!

To be clear, this plugin assumes you are ready to show the dialog when you call it.

Improve this answer
8

I know this is an old question, but for anyone who have the same issue there is a newer and simpler solution: an "appendTo" option has been introduced in jQuery UI 1.10.0

http://api.jqueryui.com/dialog/#option-appendTo

$("#dialog").dialog({
    appendTo: "form"
    ....
});
Improve this answer
2
  • might be too early for a modal dialog
    – Wolfgang Fahl
    Commented Apr 25, 2014 at 15:40
  • Working charmly
    – mzonerz
    Commented Dec 11, 2019 at 17:54
7

Fantastic! This solved my problem with ASP:Button event not firing inside jQuery modal. Please note, using the jQuery UI modal with the following allows the button event to fire:

// Dialog Link
$('#dialog_link').click(function () {
    $('#dialog').dialog('open');
    $('#dialog').parent().appendTo($("form:first"))
    return false;
});

The following line is the key to get this working!

$('#dialog').parent().appendTo($("form:first"))
Improve this answer
3

I just added the following line after you created the dialog:

$(".ui-dialog").prependTo("form");
Improve this answer
3

This was the clearest solution for me

var dlg2 = $('#dialog2').dialog({
        position: "center",
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });

dlg2.parent().appendTo('form:first');
$('#dialog_link2').click(function(){
    dlg2.dialog('open');

All the content inside the dlg2 will be available to insert in your database. Don't forget to change the dialog variable to match yours.

Improve this answer
0
3

With ASP.NET just use UseSubmitBehavior="false" in your ASP.NET button:

<asp:Button ID="btnButton" runat="server"  Text="Button" onclick="btnButton_Click" UseSubmitBehavior="false" />

Reference: Button.UseSubmitBehavior Property

Improve this answer
0
1

The solution from Robert MacLean with highest number of votes is 99% correct. But the only addition someone might require, as I did, is whenever you need to open up this jQuery dialog, do not forget to append it to parent. Like below:

var dlg = $('#questionPopup').dialog( 'open'); dlg.parent().appendTo($("form:first"));

Improve this answer
1
  • as stated in my answer above over 2 years ago, but thanks anyway!
    – Mike
    Commented Jul 24, 2015 at 6:37
1

Use this line to make this work while using the modal:true option.

open: function (type, data) { 
    $('.ui-widget-overlay').appendTo("form"); $(this).parent().appendTo("form"); 
  },
Improve this answer
1

The $('#dialog').parent().appendTo($("form:first")) solution works fine in IE 9. But in IE 8 it makes the dialog appear and disappear directly. You can't see this unless you place some alerts so it seems that the dialog never appears. I spend one morning finding a solution that works on both versions and the only solution that works on both versions 8 and 9 is:

$(".ui-dialog").prependTo("form");

Hope this helps others that are struggeling with the same issue

Improve this answer
1
  • 3
    I believe you can just set UseSubmitBehavior property of Button to false value. This way you don't need any append or prepend calls.
    – IUnknown
    Commented Apr 17, 2013 at 10:27
1

Move the dialog the right way, but you should do it only in the button opening the dialog. Here is some additional code in jQuery UI sample:

$('#create-user').click(function() {
    $("#dialog").parent().appendTo($("form:first"))
    $('#dialog').dialog('open');
})

Add your asp:button inside the dialog, and it runs well.

Note: you should change the <button> to <input type=button> to prevent postback after you click the "create user" button.

Improve this answer
0

The exact solution is;

$("#dialogDiv").dialog({ other options...,
    open: function (type, data) {
        $(this).parent().appendTo("form");
    }
});
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.