Boîte de dialogue jQuery UI avec postback du bouton ASP.NET

J'ai une boîte de dialogue jQuery UI qui fonctionne très bien sur ma page ASP.NET:

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');
    });
});

Ma div:

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

Mais le btnButton_Click n'est jamais appelé ... Comment puis-je résoudre ce problème?

Plus d'informations: J'ai ajouté ce code pour déplacer div en forme:

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

Mais toujours sans succès ...

Vous êtes proche de la solution, vous obtenez juste le mauvais objet. Cela devrait être comme ceci:

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

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

L'utilisation de ce code a résolu mon problème et cela a fonctionné dans tous les navigateurs, Internet Explorer 7, Firefox 3 et Google Chrome. Je commence à aimer jQuery ... C'est un cadre sympa.

J'ai également testé avec un rendu partiel, exactement ce que je cherchais. Génial!

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

FWIW, la forme: la première technique n'a pas fonctionné pour moi.

Cependant, la technique de cet article de blog:

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

Plus précisément, en ajoutant ceci à la déclaration de dialogue:

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

Sachez qu'il existe un paramètre supplémentaire dans jQuery UI v1.10. Il y a un appendTo paramètre qui a été ajouté, pour répondre à la ASP.NET solution de contournement que vous utilisez pour ajouter de nouveau l'élément à la forme.

Essayer:

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

La réponse de Ken ci-dessus a fait l'affaire pour moi. Le problème avec la réponse acceptée est qu'elle ne fonctionne que si vous avez un seul modal sur la page. Si vous avez plusieurs modaux, vous devrez le faire en ligne dans le paramètre "open" lors de l'initialisation de la boîte de dialogue, pas après coup.

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

Si vous faites ce que la première réponse acceptée vous dit avec plusieurs modaux, vous n'obtiendrez que le dernier modal sur la page qui fonctionne correctement, pas tous.

C'est principalement parce que jQuery déplace la boîte de dialogue en dehors des balises de formulaire à l'aide du DOM . Remettez-le dans les balises du formulaire et cela devrait fonctionner correctement. Vous pouvez le voir en inspectant l'élément dans Firefox.

Je ne voulais pas avoir à contourner ce problème pour chaque boîte de dialogue de mon projet, j'ai donc créé un simple plugin jQuery. Ce plugin sert simplement à ouvrir de nouvelles boîtes de dialogue et à les placer dans le formulaire ASP.NET :

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

Donc, pour utiliser le plugin, vous devez d'abord charger jQuery UI puis le plugin. Ensuite, vous pouvez faire quelque chose comme ceci:

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

Pour être clair, ce plugin suppose que vous êtes prêt à afficher la boîte de dialogue lorsque vous l'appelez.

Je sais que c'est une vieille question, mais pour tous ceux qui ont le même problème, il existe une solution plus récente et plus simple: une option "appendTo" a été introduite dans jQuery UI 1.10.0

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

$("#dialog").dialog({
    appendTo: "form"
    ....
});

Fantastique! Cela a résolu mon problème avec l'événement ASP: Button ne se déclenchant pas à l'intérieur de jQuery modal. Veuillez noter que l'utilisation du modal jQuery UI avec les éléments suivants permet à l'événement de bouton de se déclencher:

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

La ligne suivante est la clé pour que cela fonctionne!

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

Je viens d'ajouter la ligne suivante après avoir créé la boîte de dialogue:

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

C'était la solution la plus claire pour moi

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

Tout le contenu à l'intérieur du dlg2sera disponible pour être inséré dans votre base de données. N'oubliez pas de changer la dialogvariable pour qu'elle corresponde à la vôtre.

Avec ASP.NET, utilisez simplement UseSubmitBehavior="false"votre bouton ASP.NET:

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

Référence: Button.UseSubmitBehavior, propriété

La solution de Robert MacLean avec le plus grand nombre de votes est correcte à 99%. Mais le seul ajout que quelqu'un pourrait exiger, comme je l'ai fait, est chaque fois que vous devez ouvrir cette boîte de dialogue jQuery, n'oubliez pas de l'ajouter au parent. Comme ci-dessous:

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

Utilisez cette ligne pour que cela fonctionne tout en utilisant l'option modal: true.

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

La $('#dialog').parent().appendTo($("form:first"))solution fonctionne bien dans IE 9. Mais dans IE 8, elle fait apparaître et disparaître directement la boîte de dialogue. Vous ne pouvez pas voir cela sauf si vous placez des alertes, il semble donc que la boîte de dialogue n'apparaisse jamais. Je passe une matinée à trouver une solution qui fonctionne sur les deux versions et la seule solution qui fonctionne sur les deux versions 8 et 9 est:

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

J'espère que cela aide d'autres personnes aux prises avec le même problème

Déplacez la boîte de dialogue dans le bon sens, mais vous ne devez le faire que dans le bouton ouvrant la boîte de dialogue. Voici du code supplémentaire dans l'exemple d'interface utilisateur jQuery:

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

Ajoutez votre asp:button à l'intérieur de la boîte de dialogue, et cela fonctionne bien.

Remarque: vous devez remplacer le <bouton> par <type d'entrée = bouton> pour empêcher la publication après avoir cliqué sur le bouton "créer un utilisateur".

La solution exacte est;

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