jQuery UI Dialog mit ASP.NET Button Postback

295

Ich habe einen jQuery-UI-Dialog, der auf meiner ASP.NET-Seite hervorragend funktioniert:

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

Mein div:

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

Aber der btnButton_Click wird nie aufgerufen ... Wie kann ich das lösen?

Weitere Informationen: Ich habe diesen Code hinzugefügt, um div in form zu verschieben:

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

Aber immer noch ohne Erfolg ...

Paul
quelle
LOL ... zuerst dachte ich, du hast meine Frage gestohlen, aber dann sah ich, dass du zuerst gefragt wurdest. Ich habe die gleiche Frage für FancyBox gestellt - stackoverflow.com/questions/2686362/…
nikib3ro
1
Es gibt eine bessere Antwort als den expliziten Aufruf von appendTo (). Sehen Sie sich diese stackoverflow.com/a/20589833/2487549
foreever

Antworten:

314

Sie sind nah an der Lösung und erhalten nur das falsche Objekt. Es sollte so sein:

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
quelle
Was ist, wenn eine modale Option auf true gesetzt ist? In meinem Fall ist die Lösung perfekt, aber ohne das Modal - mit dem Modal wird das für den
Modaleffekt
37
$('#divname').parent().appendTo($("form:first"));

Die Verwendung dieses Codes löste mein Problem und funktionierte in jedem Browser, Internet Explorer 7, Firefox 3 und Google Chrome. Ich fange an, jQuery zu lieben ... Es ist ein cooles Framework.

Ich habe auch mit Teilrendern getestet, genau das, wonach ich gesucht habe. Großartig!

<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
quelle
Dieses vollständige Beispiel hat mir geholfen, das zusammenzusetzen, was mir bei diesem Problem gefehlt hat. Vielen Dank!
Dillie-O
34

FWIW, die Form: Die erste Technik hat bei mir nicht funktioniert.

Die Technik in diesem Blog-Artikel hat jedoch Folgendes bewirkt:

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

Fügen Sie dies der Dialogdeklaration hinzu:

  open: function(type,data) {
    $(this).parent().appendTo("form");
  }
Ken
quelle
1
Wenn Sie dies nicht in einem Update-Bereich tun, ist diese Methode die einzige Möglichkeit, meine Schaltflächen (für die ich ein vollständiges Postback durchführen möchte) zum Laufen zu bringen.
Merritt
+1 dafür ist dies der einzige Code, der für mich funktioniert hat. Ich benutze kein Update-Panel. DANKE!!! hat meinen Tag gerettet!
Albert Laure
+1: Das hat bei mir funktioniert, als die oben genannten Lösungen nicht funktionierten. Und ich benutze das UpdatePanel.
Vivian River
Die einfachste und beste Lösung, um das Dialogfeld wieder in das Verhalten von Form for PostBack zu integrieren.
GoldBishop
28

Beachten Sie, dass in jQuery UI v1.10 eine zusätzliche Einstellung vorhanden ist. Es wurde eine appendTo- Einstellung hinzugefügt, um die ASP.NET- Problemumgehung zu beheben , mit der Sie das Element erneut zum Formular hinzufügen.

Versuchen:

$("#dialog").dialog({
     autoOpen: false,
     height: 280,
     width: 440,
     modal: true,
     **appendTo**:"form"
});
Mike
quelle
Dies funktioniert bei mir nicht mit 2 Abfragedialogen auf derselben Seite. Ich wünschte, es wäre die richtige Lösung.
Matthew Lock
3
Die Techniken parent (). AppendTo ("form") funktionierten nicht mit einem modalen Dialogfeld, da das Overlay-Div außerhalb des Formulars bleibt und das Dialogfeld abdeckt (wodurch es nicht mehr funktionsfähig ist). Durch die Verwendung dieser neuen appendTo-Eigenschaft mit jquery 1.10 wurde das Overlay-Div an der richtigen Stelle platziert, sodass der modale Dialog korrekt funktionierte.
Humbads
Dies sollte jetzt die richtige Antwort sein, da die jquery-UI-Bibliothek aktualisiert wurde, um die Einstellung appendTo hinzuzufügen. Danke @Mike hat mir viel Zeit gespart.
AJP
24

Ken 's Antwort oben hat den Trick für mich getan. Das Problem mit der akzeptierten Antwort ist, dass es nur funktioniert, wenn Sie ein einzelnes Modal auf der Seite haben. Wenn Sie mehrere Modalitäten haben, müssen Sie dies inline im Parameter "open" tun, während Sie den Dialog initialisieren, nicht nachträglich.

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

Wenn Sie das tun, was Ihnen die erste akzeptierte Antwort mit mehreren Modalitäten sagt, erhalten Sie nur das letzte Modal auf der Seite, das Postbacks ordnungsgemäß abfeuert, nicht alle.

Nickb
quelle
1
+1 Absolut wahr. Mein Problem wurde für mich behoben. Aber warum ist es notwendig? Ich kann das nicht herausfinden.
Colin
21

Dies liegt hauptsächlich daran, dass jQuery das Dialogfeld mithilfe des DOM außerhalb der Formular-Tags verschiebt . Verschieben Sie es zurück in die Formular-Tags und es sollte gut funktionieren. Sie können dies sehen, indem Sie das Element in Firefox überprüfen.

Chad Ruppert
quelle
Ich habe es in das Formular verschoben: jQuery ("# ​​dialog"). Parent (). AppendTo (jQuery ("form: first")); Aber das Problem ist immer noch da ...
Paul
Sie registrieren keine anderen jquery-Ereignisse für das btnButton-Objekt, oder?
Chad Ruppert
und wann setzen Sie es wieder in die Form? sofort nach dem öffnen?
Chad Ruppert
jQuery (function () {jQuery ("# ​​dialog"). dialog ({ziehbar: true, anpassbar: true, show: 'Transfer', hide: 'Transfer', width: 320, autoOpen: false, minHeight: 10, minwidth : 10}); jQuery ("# ​​dialog"). Parent (). AppendTo (jQuery ("form: first"));}); ist was es sein sollte.
Chad Ruppert
und immer noch keine Freude? Zumindest wenn Sie auf die Schaltfläche klicken, sollte dies in einem Formular einen Beitrag verursachen. Erhalten Sie überhaupt JS-Fehler? Das Modal schließt nicht oder so?
Chad Ruppert
8

Ich wollte dieses Problem nicht für jeden Dialog in meinem Projekt umgehen müssen, also habe ich ein einfaches jQuery-Plugin erstellt. Dieses Plugin dient lediglich zum Öffnen neuer Dialoge und zum Platzieren dieser im ASP.NET- Formular:

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

Um das Plugin zu verwenden, laden Sie zuerst die jQuery-Benutzeroberfläche und dann das Plugin. Dann können Sie Folgendes tun:

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

Dieses Plugin setzt voraus, dass Sie bereit sind, den Dialog beim Aufrufen anzuzeigen.

James Sumners
quelle
8

Ich weiß, dass dies eine alte Frage ist, aber für alle, die das gleiche Problem haben, gibt es eine neuere und einfachere Lösung: In jQuery UI 1.10.0 wurde die Option "appendTo" eingeführt

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

$("#dialog").dialog({
    appendTo: "form"
    ....
});
Jecho Jekov
quelle
könnte für einen modalen Dialog zu früh sein
Wolfgang Fahl
Charm arbeiten
mzonerz
7

Fantastisch! Dies löste mein Problem mit ASP: Button-Ereignis, das nicht in jQuery modal ausgelöst wurde. Beachten Sie, dass bei Verwendung des Moduls jQuery UI mit den folgenden Funktionen das Schaltflächenereignis ausgelöst werden kann:

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

Die folgende Zeile ist der Schlüssel, damit dies funktioniert!

$('#dialog').parent().appendTo($("form:first"))
Mark Houldridge
quelle
3

Ich habe gerade die folgende Zeile hinzugefügt, nachdem Sie den Dialog erstellt haben:

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

Dies war die klarste Lösung für mich

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

Der gesamte Inhalt des dlg2wird zum Einfügen in Ihre Datenbank verfügbar sein. Vergessen Sie nicht, die dialogVariable so zu ändern , dass sie Ihrer entspricht.

Matteus
quelle
3

Verwenden UseSubmitBehavior="false"Sie mit ASP.NET einfach Ihre ASP.NET-Schaltfläche:

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

Referenz: Button.UseSubmitBehavior-Eigenschaft

Guilherme de Jesus Santos
quelle
1

Die Lösung von Robert MacLean mit der höchsten Stimmenzahl ist zu 99% korrekt. Aber die einzige Ergänzung, die jemand wie ich benötigt, ist, wann immer Sie diesen jQuery-Dialog öffnen müssen, vergessen Sie nicht, ihn an den übergeordneten anzuhängen. Wie unten:

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

Yahya
quelle
wie in meiner Antwort oben vor über 2 Jahren angegeben, aber trotzdem danke!
Mike
1

Verwenden Sie diese Zeile, damit dies funktioniert, während Sie die Option modal: true verwenden.

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

Die $('#dialog').parent().appendTo($("form:first"))Lösung funktioniert in IE 9 einwandfrei. In IE 8 wird der Dialog jedoch direkt angezeigt und ausgeblendet. Sie können dies nur sehen, wenn Sie einige Warnungen platzieren, sodass der Dialog anscheinend nie angezeigt wird. Ich verbringe einen Morgen damit, eine Lösung zu finden, die auf beiden Versionen funktioniert, und die einzige Lösung, die auf beiden Versionen 8 und 9 funktioniert, ist:

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

Ich hoffe, dies hilft anderen, die mit dem gleichen Problem zu kämpfen haben

Moorlang
quelle
3
Ich glaube, Sie können einfach die UseSubmitBehaviorEigenschaft von Button auf falseWert setzen. Auf diese Weise brauchen Sie keine appendoder prependAnrufe.
Yuriy Rozhovetskiy
1

Bewegen Sie den Dialog in die richtige Richtung, aber Sie sollten dies nur über die Schaltfläche tun, die den Dialog öffnet. Hier ist ein zusätzlicher Code im Beispiel für die jQuery-Benutzeroberfläche:

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

Fügen Sie Ihr asp:buttonin den Dialog ein, und es läuft gut.

Hinweis: Sie sollten die <Button> in <input type = button> ändern, um ein Postback zu verhindern, nachdem Sie auf die Schaltfläche "Benutzer erstellen" geklickt haben.

Peter Mortensen
quelle
0

Die genaue Lösung ist;

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