jQuery UI Dialog mit ASP.NET Button Postback

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

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

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

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

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

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.

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.

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.

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

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

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

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

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.

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

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

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

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

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.

Die genaue Lösung ist;

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