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

295

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

Paweł
źródło
LOL ... na początku myślałem, że ukradłeś moje pytanie, ale potem zobaczyłem, że najpierw je zadałeś. Zadałem to samo pytanie dla FancyBox - stackoverflow.com/questions/2686362/...
nikib3ro,
1
Odpowiedź jest lepsza niż jawne wywołanie appendTo (). Sprawdź ten stackoverflow.com/a/20589833/2487549
Foreever

Odpowiedzi:

314

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"));
});
Robert MacLean
źródło
co jeśli ma opcję modalną ustawioną na true? w moim przypadku rozwiązanie jest idealne, ale bez modalu - z modalem div utworzony dla efektu modalnego jest umieszczany w oknie dialogowym z metodą parent ()
SammuelMiranda
37
$('#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>
Marco
źródło
Ten pełny przykład pomógł mi poskładać to, czego mi brakowało, gdy napotkałem ten problem. Dzięki!
Dillie-O,
34

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");
  }
rozpoznać
źródło
1
jeśli nie zrobisz tego w panelu aktualizacji, ta metoda jest jedynym sposobem, w jaki mogę sprawić, by moje przyciski (które chcę zrobić pełne opóźnienie) działają.
Merritt,
+1 do tego jest to jedyny działający dla mnie kod. nie używam panelu aktualizacji. DZIĘKUJĘ CI!!! uratował mi dzień!
Albert Laure
+1: To działało dla mnie, gdy powyższe rozwiązania nie działały. I używam UpdatePanel.
Vivian River
Najprostsze i najlepsze rozwiązanie umożliwiające powrót okna dialogowego do formularza zachowania PostBack.
GoldBishop
28

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"
});
Mikrofon
źródło
To nie działa dla mnie z 2 dialogami jquery na tej samej stronie. Chciałbym, żeby to było właściwe rozwiązanie.
Matthew Lock
3
Techniki Parent (). AppendTo („forma”) nie działały z modalnym oknem dialogowym, ponieważ nakładka div pozostaje poza formularzem i ostatecznie zakrywa okno dialogowe (uniemożliwiając jego działanie). Dzięki użyciu tej nowej właściwości appendTo z jquery 1.10 div div nakładki został umieszczony we właściwym miejscu, dzięki czemu modalne okno dialogowe działało poprawnie.
humbads
To powinna być teraz poprawna odpowiedź, ponieważ biblioteka interfejsu użytkownika jquery została zaktualizowana, aby dodać ustawienie appendTo. Dziękuję @ Mike oszczędził mi dużo czasu.
AJP,
24

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.

nickb
źródło
1
+1 Absolutnie prawda. Naprawiono mój problem. Ale dlaczego jest to konieczne? Nie mogę tego rozgryźć.
Colin,
21

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.

Chad Ruppert
źródło
Przeniosłem go wewnątrz formularza: jQuery („# dialog”). Parent (). AppendTo (jQuery („form: first”)); Ale problem wciąż istnieje ...
Paul
Nie rejestrujesz żadnych innych zdarzeń jquery w obiekcie btnButton, prawda?
Chad Ruppert
a kiedy przywracasz to do formy? zaraz po otwarciu?
Chad Ruppert
jQuery (function () {jQuery ("# ​​dialog"). dialog ({draggable: true, resizable: true, show: 'Transfer', hide: 'Transfer', szerokość: 320, autoOpen: false, minHeight: 10, minwidth : 10}); jQuery („# dialog”). Parent (). AppendTo (jQuery („form: first”));}); tak powinno być.
Chad Ruppert
i nadal nie ma radości? przynajmniej po kliknięciu przycisku, jeśli w formularzu, powinien powodować post. Czy w ogóle występują błędy JS? Modal się nie zamyka czy coś?
Chad Ruppert
8

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.

James Sumners
źródło
8

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"
    ....
});
Jecho Jekov
źródło
może być za wcześnie na modalne okno dialogowe
Wolfgang Fahl
Urocze
7

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"))
Mark Houldridge
źródło
3

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

$(".ui-dialog").prependTo("form");
Buden Niere
źródło
3

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.

Matteus
źródło
3

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

Guilherme de Jesus Santos
źródło
1

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

Yahya
źródło
jak stwierdzono w mojej odpowiedzi powyżej ponad 2 lata temu, ale i tak dzięki!
Mike
1

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"); 
  },
Shaoden
źródło
1

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

Moorlang
źródło
3
Wierzę, że możesz po prostu ustawić UseSubmitBehaviorwłaściwość Button na falsewartość. W ten sposób nie potrzebujesz żadnych połączeń appendani prependpołączeń.
Yuriy Rozhovetskiy
1

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

Peter Mortensen
źródło
0

Dokładne rozwiązanie to;

$("#dialogDiv").dialog({ other options...,
    open: function (type, data) {
        $(this).parent().appendTo("form");
    }
});
Mehmet Ince
źródło