Sunday, June 3, 2012

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?



Thanks



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




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



But still without success...


Source: Tips4all

13 comments:

  1. You are close to the solution, just getting the wrong object. 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"));
    });

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


    For me using this code solved my problem and work in every browser. IE7, FF3 , 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>

    ReplyDelete
  3. 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");
    }

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

    ReplyDelete
  5. Primarily its 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.

    ReplyDelete
  6. 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);

    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'); // 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.

    ReplyDelete
  7. Robert has answered it well. If you are looking complete example code check out http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html

    ReplyDelete
  8. 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 line...

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


    is the key to get this working!

    ReplyDelete
  9. Kind of a guess, but wouldnt binding the click event in your jQuery overwrite the regular click event that asp.net generates (aka the __doPostback...). Wouldn't you want a client side trigger button to open the modal that is different from the server control button ?

    ReplyDelete
  10. 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"));

    ReplyDelete
  11. Just a comment, I had the same problem and since I was using a slide animation, there was an additional div added and I had compensate for that:

    dlg.parent().parent().appendTo($("form:first"));

    however, that caused some issue where I was unable to reopen my dialog once it was closed.
    Consequently I had to remove the animation all together.

    Now, on the other hand, I have an issue where I can open my dialog twice, but I can't close it the second time...

    ReplyDelete
  12. Move the dialog this the right way but you should do it only in the button opening the dialog.
    Here is some additional codes 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 to to prevent postback after you click the "create user" button.

    ReplyDelete
  13. just add this line

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


    after you created the dialog

    Hope this will help.

    ReplyDelete