okno jQuery UI z ASP.NET button postback

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

Przetestowałem również z częściowym renderowaniem, dokładnie tego szukałem. świetnie!

<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 zadziałała dla mnie.

Jednak technika w tym artykule na blogu zrobiła:

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

W szczególności dodanie tego do deklaracji dialogowej:

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

Należy pamiętać, że istnieje dodatkowe ustawienie w jQuery UI v1. 10. Jest appendTo ustawienie, które zostało dodane, adres ASP.NET obejście, którego używasz do ponownego dodania elementu do formularza.

Spróbuj:

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

Ken's odpowiedź powyżej zrobił sztuczkę dla mnie. Problem z zaakceptowaną odpowiedzią polega na tym, że działa tylko wtedy, gdy masz pojedynczy modal na stronie. Jeśli masz wiele modów, musisz to zrobić w linii w" open " param podczas inicjalizacji 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 modałami, otrzymasz tylko ostatni modal na stronie działa poprawnie, a nie wszystkie z nich.

Głównie 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 Firefoksie.

Nie chciałem pracować nad tym problemem dla każdego okna dialogowego w moim projekcie, więc stworzyłem prostą wtyczkę jQuery. Ta wtyczka służy jedynie do otwierania nowych okien dialogowych i umieszczania ich w ASP.NET forma:

(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 użyć wtyczki, najpierw ładujesz jQuery UI, a następnie wtyczkę. Następnie możesz zrobić coś takiego:

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

Aby było jasne, ta wtyczka zakłada, że jesteś gotowy do wyświetlenia okna dialogowego podczas jego wywoływania.

Fantastycznie! To rozwiązało mój problem z asp: Button event nie odpala wewnątrz jQuery modal. Zwróć uwagę, że użycie modalnego interfejsu jQuery z poniższym przyciskiem pozwala na wywołanie 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 tego!

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

Wiem, że to stare pytanie, ale dla każdego, kto ma ten sam problem, istnieje nowsze i prostsze rozwiązanie: opcja "appendTo" została wprowadzona w jQuery UI 1.10.0

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

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

Dodałem następujący wiersz po utworzeniu okna dialogowego:

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

To było dla mnie najczystsze 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ść wewnątrz dlg2 będzie dostępna do wstawienia w Twojej bazie danych. Nie zapomnij zmienić zmiennej dialog, aby pasowała do Twojej.

Z ASP.NET wystarczy użyć UseSubmitBehavior="false" w swoim ASP.NET button:

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

Odniesienie: Guzik.UseSubmitBehavior Property

Rozwiązanie Roberta Macleana z największą liczbą głosów jest 99% poprawne. Ale jedynym dodatkiem, którego ktoś może wymagać, tak jak ja, jest zawsze, gdy musisz 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 działało podczas używania opcji modal: true.

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

Rozwiązanie $('#dialog').parent().appendTo($("form:first")) działa dobrze w IE 9. Ale w IE 8 sprawia, że okno dialogowe pojawia się i znika bezpośrednio. Nie możesz tego zobaczyć, jeśli nie umieścisz alertów, więc wydaje się, że okno dialogowe nigdy się nie pojawi. Spędzam jeden ranek na szukaniu rozwiązania, które działa na obu wersjach i jedynym rozwiązaniem, które działa na obu wersjach 8 i 9 jest: {]}

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

Przesuń okno dialogowe we właściwy sposób, ale należy to zrobić tylko w przycisku otwierającym okno. Oto dodatkowy kod w jQuery UI sample:

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

Dodaj swój asp:button wewnątrz okna dialogowego, i działa dobrze.

Uwaga: powinieneś zmienić na , aby zapobiec postback 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");
    }
});