Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery UI Dialog with ASP.NET button postback

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

like image 943
Paul Avatar asked Apr 16 '09 17:04

Paul


Video Answer


12 Answers

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"));
});
like image 156
Robert MacLean Avatar answered Oct 04 '22 01:10

Robert MacLean


$('#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>
like image 24
Marco Avatar answered Oct 04 '22 02:10

Marco


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");
  }
like image 31
ken Avatar answered Oct 04 '22 00:10

ken


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"
});
like image 30
Mike Avatar answered Oct 04 '22 02:10

Mike


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.

like image 38
nickb Avatar answered Oct 04 '22 01:10

nickb


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.

like image 31
Chad Ruppert Avatar answered Oct 04 '22 01:10

Chad Ruppert


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"
    ....
});
like image 33
Jecho Jekov Avatar answered Oct 04 '22 01:10

Jecho Jekov


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"))
like image 23
Mark Houldridge Avatar answered Oct 04 '22 00:10

Mark Houldridge


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

$(".ui-dialog").prependTo("form");
like image 30
Buden Niere Avatar answered Oct 04 '22 02:10

Buden Niere


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.

like image 39
James Sumners Avatar answered Oct 04 '22 02:10

James Sumners


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.

like image 21
Matteus Avatar answered Oct 04 '22 00:10

Matteus


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

like image 35
Guilherme de Jesus Santos Avatar answered Oct 04 '22 00:10

Guilherme de Jesus Santos