web-dev-qa-db-fra.com

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

J'ai un dialogue jQuery UI Dialog 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');
    });
});

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

c#asp.netjqueryjquery-uipostback
292
Paul

Vous êtes proche de la solution, juste pour obtenir le mauvais objet. Cela devrait être comme ça:

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"));
});
314
Robert MacLean
$('#divname').parent().appendTo($("form:first"));

Utiliser 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 framework cool.

J'ai aussi testé avec 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>
37
Marco

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

Cependant, la technique décrite dans cet article de blog a:

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

Sachez qu’il existe un paramètre supplémentaire dans jQuery UI v1.10. Il existe un paramètre appendTo qui a été ajouté pour résoudre la solution ASP.NET 'utilise pour ré-ajouter l'élément au formulaire.

Essayer:

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

ken La réponse ci-dessus a fait l'affaire pour moi. Le problème avec la réponse acceptée est que cela 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, et non après.

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

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

24
nickb

Principalement parce que jQuery déplace la boîte de dialogue en dehors des balises de formulaire à l'aide de DOM . Déplacez-le à l'intérieur des balises de formulaire et cela devrait fonctionner correctement. Vous pouvez le voir en inspectant l'élément dans Firefox.

21
Chad Ruppert

Je ne voulais pas contourner ce problème pour chaque dialogue de mon projet, j'ai donc créé un simple plugin jQuery. Ce plugin sert simplement à ouvrir de nouveaux dialogues 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 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.

8
James Sumners

Fantastique! Cela a résolu mon problème avec ASP: L'événement Button ne se déclenche pas dans jQuery modal. Veuillez noter que l’utilisation du modal jQuery UI avec ce qui suit permet à l’événement 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"))
7
Mark Houldridge

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

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

3
Matteus

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

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

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

3
Guilherme de Jesus Santos

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

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

Déplacez la boîte de dialogue dans le bon sens, mais vous ne devez le faire que dans le bouton qui ouvre la boîte de dialogue. Voici un 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 tout se passera bien.

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

1
Tong Tran Son

La solution $('#dialog').parent().appendTo($("form:first")) fonctionne bien dans IE 9. Mais dans IE 8, la boîte de dialogue apparaît et disparaît directement. Vous ne pouvez pas voir ceci à moins de placer 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 versions 8 et 9 est la suivante:

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

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

1
Moorlang

Utilisez cette ligne pour que cela fonctionne avec l’option modal: true.

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

La solution de Robert MacLean avec le plus grand nombre de voix est correcte à 99%. Mais le seul ajout que quelqu'un pourrait avoir besoin, 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"));

1
Yahya

La solution exacte est;

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