jQuery UI Dialog with ASP.NET bouton postback

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

en utilisant ce code a résolu mon problème et il a fonctionné dans chaque navigateur, Internet Explorer 7, Firefox 3, et Google Chrome. Je commence à aimer jQuery... C'est un chouette cadre.

j'ai testé avec Rendu partiel aussi, exactement ce que je cherchais. Super!

<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, de la forme:première technique ne fonctionne pas pour moi.

cependant, la technique dans cet article de blog a fait:

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 y a un réglage supplémentaire dans jQuery UI v1.10. Il y a un réglage "appendice qui a été ajouté, pour adresser le ASP.NET contournement que vous utilisez pour ajouter de nouveau l'élément au formulaire.

, Essayez:

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

ken 's réponse 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 modal unique sur la page. Si vous avez plusieurs models, vous aurez besoin de le faire en ligne dans le paramètre "ouvrir" tout en initialisant le dialogue, pas après le fait.

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

si vous faites ce que la première réponse acceptée vous dit avec plusieurs models, vous n'obtiendrez que le dernier modal sur la page tirer correctement les postbacks, pas tous.

principalement parce que jQuery déplace la boîte de dialogue en dehors des balises de formulaire en utilisant le DOM . Déplacez-le à l'intérieur des étiquettes de forme et il devrait fonctionner très bien. Vous pouvez le voir en examinant L'élément dans Firefox.

Je ne voulais pas avoir à contourner ce problème pour chaque dialogue de mon projet, donc j'ai créé un simple plugin jQuery. Ce plugin est simplement pour ouvrir de nouveaux dialogues et les placer dans le ASP.NET forme:

(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 chargez d'abord jQuery UI et puis le plugin. Ensuite, vous pouvez faire quelque chose comme ce qui suit:

$('#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.

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. S'il vous plaît noter, en utilisant L'UI modal de jQuery avec ce qui suit permet à l'événement de bouton de feu:

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

La ligne suivante est la clé pour obtenir ce travail!

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

je sais que c'est une vieille question, mais pour n'importe qui qui qui ont le même problème il y a une solution plus récente et plus simple: une option" appendice "a été introduite dans jQuery UI 1.10.0

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

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

je viens d'ajouter la ligne suivante après que vous ayez créé le dialogue:

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

C'était la plus claire pour moi, la solution

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 dlg2 sera disponible pour insertion dans votre base de données. N'oubliez pas de changer la variable dialog pour qu'elle corresponde à la vôtre.

avec ASP.NET il suffit d'utiliser UseSubmitBehavior="false" dans votre ASP.NET bouton:

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

Référence: Bouton.UseSubmitBehavior Property

La solution de Robert MacLean avec le plus grand nombre de voix est de 99%. Mais le seul ajout dont quelqu'un pourrait avoir besoin, comme je l'ai fait, est chaque fois que vous avez besoin d'ouvrir ce dialogue jQuery, n'oubliez pas de l'ajouter à parent. Comme ci-dessous:

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

utilisez cette ligne pour faire fonctionner cette option tout en utilisant l'option modal:true.

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

la solution $('#dialog').parent().appendTo($("form:first")) fonctionne très bien dans IE 9. Mais dans IE 8, le dialogue apparaît et disparaît directement. Vous ne pouvez pas voir cela à moins de placer quelques alertes de sorte qu'il semble que le dialogue n'apparaît 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");

Espérons que cela aide les autres qui sont struggeling avec la même question

déplacez le dialogue de la bonne façon, mais vous devez le faire que dans le bouton ouvrant le dialogue. Voici quelques codes supplémentaires dans l'échantillon de jQuery UI:

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

ajoutez votre asp:button dans la boîte de dialogue, et il fonctionne bien.

Note: vous devez remplacer le bouton pour empêcher postback 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");
    }
});