1

ここでjQueryの初心者。このサイトで数十の同様の質問と、これまでに提供された回答をすべて調べましたが、ほとんど同じ回答があり、すべてを試しましたが、何もうまくいきません.

私の .aspx の Javascript コードについては、現在次のものがあります。

<script type="text/javascript" src="/resources/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/resources/jquery-ui-1.8.20.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="/resources/ui-lightness/jquery-ui-1.8.20.custom.css" />

<script language="javascript" type="text/javascript">
    $(function() {
        var $myDialog = $("#cancelDialog").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                'Yes, cancel': function() {
                    $(this).dialog('close');
                    return true;
                },
                'No, resume editing': function() {
                    $(this).dialog('close');
                    return false;
                }
            }
        });

        $("[id$=btnCancel]").click(function(e) {
            //e.preventDefault();
            alert('boo');
            //$myDialog.dialog('open');
        });
    });
</script>

「btnCancel」のマークアップは次のようになります。「onClientClick」属性がないことに注意してください。これは、jQuery が自動的に実行することになっているためです。

<asp:Button ID="btnCancel" CssClass="btnCancel" runat="server" Text="Cancel"
    CausesValidation="false" UseSubmitBehavior="false" />

そして、これがキャンセルダイアログ用のマークアップです。

<div id="cancelDialog" style="display: none;" title="Please confirm cancellation">
    <p>Are you sure you wish to cancel and abandon your changes?</p>
</div>

私が見たすべての例 (およびここで提供されている回答) によると、これにより、2 つのボタンを備えた jQuery UI ポップアップが表示され、機能するはずです。キャンセル ボタンを押すと、ページがポスト バックしなくなりました (Patrick Scott の提案で行った変更のため)。これには標準の Javascript confirm() ダイアログを使用することもできますが、プロンプト/スタイリングをカスタマイズできるようにしたいと考えています。

他に考えられる唯一の情報は、このコードが ASP.NET ウィザード コントロール上にある (キャンセル ボタンが StepNavigationTemplate にある) ことですが、それは問題ではありません。

これを機能させるために何を変更する必要があるかについてのヒントは大歓迎です!

（私が行った最近の変更を反映するために質問とコードが更新されました）

4

5 に答える 5

1

機能しない理由は、ボタンがページにレンダリングされるときにボタンの ID が変更されるためです。JavaScript でコントロールにアクセスするには、次のClientIDプロパティを使用する必要があります。

$("#<%= btnCancel.ClientID %>").click(function(e){
    //open the dialog
});
于 2012-04-09T20:32:04.107 に答える
1

クリック イベントのセレクターとして $("[id$=btnCancel]") を使用します。

$= は jquery セレクターで終了することを意味し、webforms は ID を一致させない多くのものを追加します。

$("[id$=btnCancel]").click(function(e) {

また、ボタンをダイアログの残りの部分とは別に宣言している理由もわかりません...

代わりにこれを行います：

$(function() {
        var $myDialog = $("#cancelDialog").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                    'Yes, cancel': function() {
                        $(this).dialog('close');
                        return true;
                    },
                    'No, resume editing': function() {
                        $(this).dialog('close');
                        return false;
                    }
                }
        });

        $("[id$=btnCancel]").click(function(e) {
            e.preventDefault();
            $myDialog.dialog('open');
        });
    });
于 2012-04-09T20:38:55.597 に答える
0 
<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;

これをモーダル確認ダイアログの「はい」ボタンにフックします。必要に応じて ID を変更する必要があります。

于 2013-02-16T16:20:42.683 に答える
0

あなたはそれを分解する必要があります-ページが再投稿されているために表示されないJSのどこかに別のエラーがあるようです。クリックでアラートを試してください:

$('#btnCancel').click(function(e) {
alert('boo');
});

これが機能しない場合は、最も単純なスクリプトを可能な限り機能させてから追加する必要があります。

于 2012-04-09T20:33:50.533 に答える
0

私はそれを考え出した！<script>HTML4 または HTML5 では、タグ (他のほとんどのタグも同様) をセルフクローズできないことが判明しました。私はそれらを次のように書いていました：

<script type="text/javascript" src="whatever" />

標準に従った場合、次のように記述する必要があります。

<script type="text/javascript" src="whatever"></script>

これにより、最初の<script>インクルード (jquery-1.7.2.min.js) が機能するようになりましたが、次のインクルードは失敗しました。変でしょ？

サポート情報へのリンクを次に示します。

于 2012-06-01T17:18:29.417 に答える