web-dev-qa-db-ja.com

ASP.NETボタンによるjQuery UIダイアログのポストバック

私は私のASP.NETページで素晴らしい仕事jQuery UIダイアログを持っています：

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

私のdiv：

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

しかし、btnButton_Clickは呼び出されることはありません...どうすれば解決できますか？

詳細情報：divをformに移動するためにこのコードを追加しました。

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

それでも成功せず...

c#asp.netjqueryjquery-uipostback
292
Paul

あなたはただ間違った物を手に入れて解決策に近づいています。これは次のようになります。

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"));
});
314
Robert MacLean
$('#divname').parent().appendTo($("form:first"));

このコードを使用することで私の問題は解決し、Internet Explorer 7、Firefox 3、およびGoogle Chromeのすべてのブラウザで機能しました。私はjQueryを好きになり始めています...それはクールなフレームワークです。

私は部分レンダリングでもテストしました。まさに私が探していたものです。 すばらしい！

<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>
37
Marco

FWIW、フォーム：最初のテクニックは私にはうまくいきませんでした。

ただし、そのブログ記事のテクニックは次のとおりです。

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

具体的には、これをダイアログ宣言に追加します。

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

JQuery UI v1.10には追加の設定があることに注意してください。 ASP.NET 回避策に対処するために、appendTo設定が追加されました'フォームに要素を再追加するために使用しています。

試してください：

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

上記のkenの答えは私にとってはトリックでした。受け入れられた答えの問題はそれがあなたがページの上に単一のモーダルを持っている場合にだけ働くということです。複数のモーダルがある場合は、ダイアログの初期化中に「open」パラメータ内でインラインで行う必要があります。事後ではありません。

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

あなたが最初の受け入れられた答えが複数の様相であなたに言うことをするならば、あなたはポストバックをきちんと動かしているページの最後の様相だけを得るでしょう、それらのすべてではありません。

24
nickb

主に、jQueryが DOM を使用してダイアログをフォームタグの外側に移動するためです。フォームタグの内側に戻すとうまくいきます。これはFirefoxの要素を調べることで確認できます。

21
Chad Ruppert

私は自分のプロジェクトのすべてのダイアログに対してこの問題を回避したくなかったので、簡単なjQueryプラグインを作成しました。このプラグインは、単に新しいダイアログを開き、それらを 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>

プラグインを使用するには、まずjQuery UIをロードしてからプラグインをロードします。その後、次のようなことができます。

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

明確にするために、このプラグインはあなたがそれを呼び出したときにダイアログを表示する準備ができていると仮定します。

8
James Sumners

すごい！これで、ASP：ButtonイベントがjQueryモーダル内で発生しないという私の問題が解決しました。次のようにjQuery UIモーダルを使用するとbuttonイベントを発生させることができます。

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

次の行はこれを機能させるための鍵です！

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

私はこれが古い質問であることを知っています、しかし同じ問題を抱えている人のためにより新しくそしてより簡単な解決策があります： "appendTo"オプションがjQuery UI 1.10.0で導入されました

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

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

これは私にとって最も明確な解決策でした

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

dlg2内のすべてのコンテンツはデータベースに挿入できるようになります。あなたのものと一致するようにdialog変数を変更することを忘れないでください。

3
Matteus

ASP.NETでは、ASP.NETボタンにUseSubmitBehavior="false"を使用するだけです。

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

参照：Button.UseSubmitBehaviorプロパティ

3
Guilherme de Jesus Santos

ダイアログを作成した後、次の行を追加しました。

$(".ui-dialog").prependTo("form");
3
Buden Niere

ダイアログを正しい方法で移動しますが、ダイアログを開くボタンでのみ実行する必要があります。これがjQuery UIサンプルの追加コードです。

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

ダイアログの中にasp:buttonを追加すると、うまく動きます。

注：「ユーザーの作成」ボタンをクリックした後のポストバックを防ぐために、<button>を<input type = button>に変更する必要があります。

1
Tong Tran Son

$('#dialog').parent().appendTo($("form:first"))解決法はIE 9ではうまくいきますが、IE 8ではダイアログが直接現れたり消えたりします。これは、警告を出さない限り表示されないため、ダイアログは表示されません。私はある朝、両方のバージョンで機能する解決策を見つけ、バージョン8と9の両方で機能する唯一の解決策を見つけます。

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

これが同じ問題に苦しんでいる他の人に役立つことを願っています

1
Moorlang

Modal：trueオプションを使用している間は、この行を使用してこれを機能させることができます。

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

最高得票数を持つRobert MacLeanの解決策は、99％正しいです。しかし、私がそうであったように、誰かが必要とするかもしれない唯一の追加は、あなたがこのjQueryダイアログを開く必要があるときはいつでも、それを親に追加することを忘れないでください。以下のように：

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

1
Yahya

正確な解決策は、

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