9

UpdatePanel の GridView に TemplateField と呼ばれるボタンがありますbtnDelete。標準ではなく、OnClientClick="return confirm('Are you sure?')"jQuery Dialog を使用したいと思います。

これまでのところ、btnDelete.Attributes["onclick"]コード ビハインドで jQuery ダイアログ コードを使用および設定することで、jQuery を設定できました。ただし、「確認」または「キャンセル」をクリックする前に、すべての場合にサーバーにポストバックされます。

生成される HTML は次のとおりです。

<input type="submit" rel="Are you sure?" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="return function() { 
            $('#delete-transfer-confirm').dialog({
              buttons: {
                'Confirm' : function() { $(this).dialog('close'); return true; },
                'Cancel'  : function() { $(this).dialog('close'); return false; }
              }
            });

            $('p.message').text($(this).attr('rel'));
            $('#delete-transfer-confirm').dialog('open');
          };" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">

どちらかのボタンがクリックされるまでこの関数がブロックされない原因は何ですか?

逆に、標準の確認は問題なく機能します。

<input type="submit" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="try{if (!window.confirm('Are you sure?')){return false;};}catch(e1){alert(&quot;Unexpected Error:\n\n&quot; + e1.toString());return false;};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">

ありがとう、マーク

アップデート：

最終的に、レンダリングする name="" 属性を取得するには、UseSubmitBehavior="false" を使用する必要がありました。次に、値を「return;」に設定して、OnClientClick をオーバーライドする必要がありました。したがって、デフォルトの __doPostBack() は実行されません。次に、Confirm で __doPostBack() を呼び出す .live() クリック ハンドラを接続することができました。

$('input.delete').live('click', function(e) {
        var btnDelete = $(this);
        alert($(btnDelete).attr('name'));
        e.preventDefault();


        $('#delete-transfer-confirm').dialog({
          buttons: {
            'Confirm': function() {
              $(this).dialog('close');
              __doPostBack($(btnDelete).attr('name'), '');

              return true;
            },
            'Cancel': function() {
              $(this).dialog('close');
              return false;
            }
          }
        });

        $('p.message').text($(this).attr('rel'));
        $('#delete-transfer-confirm').dialog('open');
      });
4

2 に答える 2

5

例として、この質問に対して選択された回答を確認してください: Jquery UI ダイアログで「確認」ダイアログを実装する方法は?

いくつかのメモ:

onclick 属性に onclick 機能を入れないでください。jQuery の大きな利点の 1 つは、控えめな Javascript を実行できることです。代わりに、次のようにします。

$(function() {
    $('.delete').click(function(e) {
        e.preventDefault() //this will stop the automatic form submission
        //your functionality here
    });
});

また、最初のクリック イベントが発生する前にダイアログが初期化されるように、ダイアログがクリック イベントの外でインスタンス化されていることを確認してください。したがって、次のような結果になります。

$(function() {
     $("#delete-transfer-confirm").dialog({
      autoOpen: false,
      modal: true
    });

    $('.delete').click(function(e) {
        e.preventDefault();
        $('#delete-transfer-confirm').dialog({
            buttons: {
                'Confirm': function() {
                    $(this).dialog('close');
                    return true;
                },
                'Cancel': function() {
                    $(this).dialog('close');
                    return false;
                }
            }
        });

        $('p.message').text($(this).attr('rel'));
        $('#delete-transfer-confirm').dialog('open');
    });
});

それはあなたのためにトリックをするはずです。

于 2010-10-28T20:15:36.927 に答える
2 
$(document).ready(function () {

        $('#btnCancel').click(function (e) {
            e.preventDefault();

            $("<div><span><b>Are you sure you want to cancel this order?</b></span></div>").dialog({
                modal: true,
                draggable: false,
                resizable: false,
                width: 430,
                height: 150,
                buttons: {
                    "No": function () {
                        $(this).dialog("destroy");

                    },
                    "Yes": function () {
                        $("#btnCancel").unbind();
                        $(this).dialog("destroy");
                        document.getElementById('<%= btnCancel.ClientID %>').click();

                    }
                }
            });
        });

    });

次に、ページ本文で

 <asp:button id="btnCancel" runat="server" cssclass="button_major" text="Cancel" style="float: right"
                    onclick="btnCancel_ClickEvent" clientidmode="Static" />
于 2014-08-14T08:02:36.330 に答える