ASP.NET düğmesi geri gönderme ile jQuery UI İletişim Kutusu

ASP.NET sayfamda harika çalışan bir jQuery UI iletişim kutusu var:

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

Benim div:

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

Ama btnButton_Click asla çağrılmaz ... Bunu nasıl çözebilirim?

Daha fazla bilgi: div bu forma taşımak için bu kodu ekledi:

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

Ama yine de başarılı olamadık ...

Çözüme yakınsınız, sadece yanlış nesneyi alıyorsunuz. Bu şekilde olmalı:

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

Bu kodu kullanmak sorunumu çözdü ve her tarayıcıda, Internet Explorer 7, Firefox 3 ve Google Chrome'da çalıştı. JQuery'i sevmeye başladım ... Bu harika bir çerçeve.

Ben de tam olarak ne aradığını kısmi render ile test ettim. Harika!

<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, form: ilk teknik benim için işe yaramadı.

Ancak, bu blog makalesindeki teknik şunları yaptı:

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

Özellikle, bunu diyalog bildirimine eklemek:

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

JQuery UI v1.10'da ek bir ayar olduğunu unutmayın. Öğeyi forma yeniden eklemek için kullandığınız ASP.NET geçici çözümüne yönelik olarak eklenen bir appendTo ayarı vardır .

Deneyin:

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

ken'nin cevabı bana hile yaptı. Kabul edilen cevapla ilgili sorun, yalnızca sayfada tek bir modunuz varsa işe yaramasıdır. Birden fazla modunuz varsa, iletişim kutusunu başlatırken bunu "değil" parametresinde satır içi yapmanız gerekir.

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

İlk kabul edilen cevabın size birden fazla kiple söylediklerini yaparsanız, sayfadaki son modalın tümünü değil, geri dönüşleri düzgün şekilde çalıştıracaksınız.

Çünkü jQuery, diyalogu DOM kullanarak form etiketlerinin dışına taşır . Form etiketlerinin içine geri taşıdığınızda düzgün çalışması gerekir. Bunu Firefox'taki öğeyi inceleyerek görebilirsiniz.

Projemdeki her iletişim kutusu için bu soruna geçici bir çözüm bulmak istemedim, bu yüzden basit bir jQuery eklentisi oluşturdum. Bu eklenti yalnızca yeni iletişim kutuları açmak ve bunları ASP.NET formuna yerleştirmek içindir :

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

Eklentiyi kullanmak için önce jQuery UI'yi ve ardından eklentiyi yüklersiniz. Sonra aşağıdaki gibi bir şey yapabilirsiniz:

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

Açık olmak gerekirse, bu eklenti, iletişim kutusunu aradığınızda göstermeye hazır olduğunuzu varsayar.

Bunun eski bir soru olduğunu biliyorum, ancak aynı sorunu olan herkes için daha yeni ve daha basit bir çözüm var: jQuery UI 1.10.0'da "appendTo" seçeneği tanıtıldı

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

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

Fantastik! Bu jQuery modal içinde ateş değil ASP: Button olay ile benim sorunum çözüldü. JQuery UI yöntemini aşağıdakilerle birlikte kullanmanın düğme olayının tetiklenmesine izin verdiğini lütfen unutmayın:

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

Aşağıdaki satır, bu çalışmanın anahtarıdır!

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

İletişim kutusunu oluşturduktan sonra şu satırı ekledim:

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

Bu benim için en net çözümdü

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

İçindeki tüm içerik dlg2veritabanınıza eklenebilecek. dialogDeğişkeni kendinize uyacak şekilde değiştirmeyi unutmayın .

ASP.NET ile sadece UseSubmitBehavior="false"ASP.NET düğmenizde kullanın :

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

Başvuru: Button.UseSubmitBehavior Özelliği

En yüksek oyu alan Robert MacLean'ın çözümü% 99 doğrudur. Ama birisinin gerektirebileceği tek ekleme, yaptığım gibi, bu jQuery iletişim kutusunu açmanız gerektiğinde, üst öğeye eklemeyi unutmayın. Aşağıdaki gibi:

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

Modal: true seçeneğini kullanırken bu işi yapmak için bu satırı kullanın.

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

$('#dialog').parent().appendTo($("form:first"))Çözelti IE 9'da cezası işleri Ama IE 8'de o diyalog görünür ve doğrudan ortadan yapar. Bazı uyarılar yerleştirmedikçe bunu göremezsiniz, böylece iletişim kutusu hiçbir zaman görünmez. Bir sabah her iki sürümde de çalışan bir çözüm bulmaya çalışıyorum ve 8 ve 9 sürümlerinde çalışan tek çözüm:

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

Umarım bu aynı sorunla mücadele eden diğerlerine yardımcı olur

İletişim kutusunu doğru şekilde taşıyın, ancak iletişim kutusunu yalnızca iletişim kutusunu açan düğmede yapmanız gerekir. İşte jQuery UI örneğinde bazı ek kod:

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

asp:buttonİletişim kutusunun içine ekleyin ve iyi çalışır.

Not: "kullanıcı oluştur" düğmesini tıkladıktan sonra geri göndermeyi önlemek için <düğmesini> <giriş türü = düğme> olarak değiştirmeniz gerekir.

Kesin çözüm;

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