Okno dialogowe interfejsu użytkownika jQuery z zwrotnym przyciskiem ASP.NET

Mam okno dialogowe interfejsu użytkownika jQuery działające świetnie na mojej stronie 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');
    });
});

My div:

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

Ale btnButton_Click nigdy się nie nazywa ... Jak to rozwiązać?

Więcej informacji: Dodałem ten kod, aby przenieść div do formularza:

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

Ale wciąż bez powodzenia ...

Jesteś blisko rozwiązania, po prostu otrzymujesz niewłaściwy obiekt. Powinno to wyglądać tak:

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

Użycie tego kodu rozwiązało mój problem i działało w każdej przeglądarce, Internet Explorer 7, Firefox 3 i Google Chrome. Zaczynam kochać jQuery ... To fajne środowisko.

Testowałem też z częściowym renderowaniem, dokładnie tego, czego szukałem. Świetny!

<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, forma: pierwsza technika nie działała dla mnie.

Jednak technika opisana w tym artykule na blogu:

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

W szczególności dodanie tego do deklaracji okna dialogowego:

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

Pamiętaj, że w jQuery UI v1.10 jest dodatkowe ustawienie. Jest tam appendTo ustawienie, które zostały dodane, aby zająć się ASP.NET obejść używasz, aby ponownie dodać element do formularza.

Próbować:

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

Powyższa odpowiedź Ken'a załatwiła sprawę . Problem z zaakceptowaną odpowiedzią polega na tym, że działa ona tylko wtedy, gdy na stronie znajduje się jeden modal. Jeśli masz wiele modałów, musisz to zrobić bezpośrednio w parametrze „open” podczas inicjowania okna dialogowego, a nie po fakcie.

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

Jeśli zrobisz to, co mówi pierwsza zaakceptowana odpowiedź z wieloma modami, dostaniesz tylko ostatni modal na stronie działający poprawnie, odpalający zwroty, a nie wszystkie.

Przede wszystkim dlatego, że jQuery przenosi okno dialogowe poza znaczniki formularza za pomocą DOM . Przenieś go z powrotem do znaczników formularza i powinno działać dobrze. Możesz to zobaczyć, sprawdzając element w przeglądarce Firefox.

Nie chciałem omijać tego problemu dla każdego okna dialogowego w moim projekcie, dlatego stworzyłem prostą wtyczkę jQuery. Ta wtyczka służy jedynie do otwierania nowych okien dialogowych i umieszczania ich w formularzu 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>

Aby skorzystać z wtyczki, najpierw ładujesz interfejs użytkownika jQuery, a następnie wtyczkę. Następnie możesz wykonać następujące czynności:

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

Żeby było jasne, ta wtyczka zakłada, że ​​jesteś gotowy, aby wyświetlić okno dialogowe po jego wywołaniu.

Wiem, że to stare pytanie, ale dla każdego, kto ma ten sam problem, istnieje nowsze i prostsze rozwiązanie: w jQuery UI 1.10.0 wprowadzono opcję „appendTo”

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

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

Fantastyczny! To rozwiązało mój problem ze zdarzeniem ASP: Button nie uruchamiającym się w module jQuery. Uwaga: użycie modalnego interfejsu użytkownika jQuery w następujący sposób umożliwia uruchomienie zdarzenia przycisku:

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

Następująca linia jest kluczem do uruchomienia tej funkcji!

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

Właśnie dodałem następujący wiersz po utworzeniu okna dialogowego:

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

To było dla mnie najwyraźniejsze rozwiązanie

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

Cała zawartość dlg2będzie dostępna do wstawienia do bazy danych. Nie zapomnij zmienić dialogzmiennej, aby pasowała do twojej.

Z ASP.NET wystarczy użyć UseSubmitBehavior="false"przycisku ASP.NET:

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

Odniesienie: Właściwość Button UseSubmitBehavior

Rozwiązanie Roberta MacLeana z największą liczbą głosów jest poprawne w 99%. Ale jedynym dodatkiem, którego ktoś może wymagać, tak jak ja, jest to, że kiedy potrzebujesz otworzyć to okno dialogowe jQuery, nie zapomnij dołączyć go do rodzica. Jak poniżej:

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

Użyj tej linii, aby to zadziałało, używając opcji modal: true.

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

$('#dialog').parent().appendTo($("form:first"))Rozwiązanie działa dobrze w IE 9. Ale w IE 8 to sprawia, że pojawiają się i znikają dialogowe bezpośrednio. Nie możesz tego zobaczyć, chyba że umieścisz jakieś alerty, więc wygląda na to, że okno dialogowe nigdy się nie pojawi. Pewnego ranka spędzam na znajdowaniu rozwiązania, które działa na obu wersjach, a jedynym rozwiązaniem, które działa na obu wersjach 8 i 9 jest:

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

Mam nadzieję, że pomoże to innym osobom zmagającym się z tym samym problemem

Przesuń okno we właściwy sposób, ale powinieneś to zrobić tylko w przycisku otwierającym okno dialogowe. Oto dodatkowy kod w przykładowym interfejsie użytkownika jQuery:

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

Dodaj swoje asp:buttonokno dialogowe i działa dobrze.

Uwaga: powinieneś zmienić <przycisk> na <typ wejścia = przycisk>, aby zapobiec zwrotowi po kliknięciu przycisku „utwórz użytkownika”.

Dokładne rozwiązanie to;

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