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

295

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

Paul
la source
LOL ... au début, je pensais que vous aviez volé ma question, mais ensuite je vous ai vu poser la première. J'ai posé la même question pour FancyBox - stackoverflow.com/questions/2686362/…
nikib3ro
1
Il y a une meilleure réponse que d'appeler explicitement appendTo (). Consultez ce stackoverflow.com/a/20589833/2487549
Foreever

Réponses:

314

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"));
});
Robert MacLean
la source
que faire si l'option modale est définie sur true? dans mon cas, la solution est parfaite, mais sans le modal - avec le modal, le div créé pour l'effet modal est placé sur le dialogue avec la méthode parent ()
SammuelMiranda
37
$('#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>
Marco
la source
Cet exemple complet m'a aidé à reconstituer ce que je manquais en rencontrant ce problème. Merci!
Dillie-O
34

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");
  }
ken
la source
1
si vous ne le faites pas dans un panneau de mise à jour, cette méthode est le seul moyen pour que mes boutons (que je veux faire une publication complète) fonctionnent.
Merritt
+1 pour cela, c'est le seul code qui a fonctionné pour moi. je n'utilise pas le panneau de mise à jour. MERCI!!! sauvé ma journée!
Albert Laure
+1: Cela a fonctionné pour moi lorsque les solutions ci-dessus n'ont pas fonctionné. Et j'utilise UpdatePanel.
Vivian River du
La solution la plus simple et la meilleure pour récupérer la boîte de dialogue dans le formulaire pour le comportement PostBack.
GoldBishop
28

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"
});
Mike
la source
Cela ne fonctionne pas pour moi avec 2 dialogues jquery sur la même page. Je le souhaite car c'est la bonne solution.
Matthew Lock
3
Les techniques parent (). AppendTo ("formulaire") ne fonctionnaient pas avec une boîte de dialogue modale car la superposition div restait en dehors du formulaire et finissait par couvrir la boîte de dialogue (la rendant inutilisable). En utilisant cette nouvelle propriété appendTo avec jquery 1.10, la superposition div a été placée au bon endroit, donc la boîte de dialogue modale a fonctionné correctement.
humbads
Cela devrait être la bonne réponse maintenant, car la bibliothèque d'interface utilisateur jquery a été mise à jour pour ajouter le paramètre appendTo. Merci @Mike m'a fait gagner beaucoup de temps.
AJP
24

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.

nickb
la source
1
+1 Absolument vrai. Correction de mon problème pour moi. Mais pourquoi est-ce nécessaire? Je ne peux pas comprendre ça.
Colin
21

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.

Chad Ruppert
la source
Je l'ai déplacé à l'intérieur du formulaire: jQuery ("# ​​dialog"). Parent (). AppendTo (jQuery ("form: first")); Mais le problème est toujours là ...
Paul
Vous n'enregistrez aucun autre événement jquery sur l'objet btnButton, n'est-ce pas?
Chad Ruppert
et quand remettez-vous le formulaire? immédiatement après ouverture?
Chad Ruppert
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"));}); c'est ce que ça devrait être.
Chad Ruppert
et toujours pas de joie? à tout le moins lorsque vous cliquez sur le bouton, s'il est dans un formulaire, il doit provoquer une publication. Recevez-vous des erreurs JS? Le modal ne ferme pas ou quoi que ce soit?
Chad Ruppert
8

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.

James Sumners
la source
8

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"
    ....
});
Jecho Jekov
la source
pourrait être trop tôt pour un dialogue modal
Wolfgang Fahl
Travailler à merveille
mzonerz
7

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"))
Mark Houldridge
la source
3

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

$(".ui-dialog").prependTo("form");
Buden Niere
la source
3

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.

Matteus
la source
3

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é

Guilherme de Jesus Santos
la source
1

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

Yahya
la source
comme indiqué dans ma réponse ci-dessus il y a plus de 2 ans, mais merci quand même!
Mike
1

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"); 
  },
Shaoden
la source
1

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

Moorlang
la source
3
Je crois que vous pouvez simplement définir la UseSubmitBehaviorvaleur de la propriété Button false. De cette façon , vous ne nécessitent pas appendou prependappels.
Yuriy Rozhovetskiy
1

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

Peter Mortensen
la source
0

La solution exacte est;

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