10

Twitter Bootstrap のボタンの読み込み状態 ( http://twitter.github.com/bootstrap/javascript.html#buttons ) を使用しています。

HTML:

<input type="submit" class="btn" value="Register" id="accountRegister" data-loading-text="Loading..."/>

JS:

(function ($, undefined) {
    $("#accountRegister").click(function () {
        $(this).button('loading');
        $.ajax({
            type:"POST",
            url:"/?/register/",
            data:$("#loginForm").serialize(),
            error:function (xhr, ajaxOptions, thrownError) {
                $("#accountRegister").button('reset');
            },
            success:function (data) {
                $("#accountRegister").button('reset');
            }
        });
        return false;
    })
})(jQuery);

しかし、多くのボタンがある場合、多くの関数 (?) を記述する必要があります。もちろん、私はこのようなものを作ることができます：

$(".ajax-button").bind("click", function() { 
     $(this).button("loading");})

そして、jQuery Ajax イベントを使用できますajaxComplete

$(".ajax-button").bind("ajaxComplete", function() { 
     $(this).button("reset");})

ただし、この方法では、 Ajax リクエストが完了すると、すべてのボタンが通常の状態に設定されます。

ユーザーがbutton1をクリックしてからbutton2をクリックすると(両方のボタンが Ajax リクエストを送信している)、最初の Ajax リクエストが完了すると、通常の状態に設定されます。どのボタンを通常の状態に設定する必要があるかを判断するにはどうすればよいですか?

前もって感謝します。

アップデート

必要なのは、アクション (Ajax リクエスト) をトリガーしたボタンを特定し、状態を読み込み中に設定し、Ajax リクエストが完了すると状態を通常に設定することだけです。

4

1 に答える 1

9

私は自分の質問に対する解決策を見つけました =) jQuery のドキュメントを読んだ後、自分のシステム用に次のコードを書きました。

core.js:

(function ($, undefined) {
    $.ajaxSetup({
        beforeSend:function (xhr, settings) {
            if (settings.context != undefined && settings.context.hasClass('btn')) {
                settings.context.button('loading');
            }
        },
        complete:function () {
            this.button('reset');
        }
    });
})(jQuery);

アカウント.js:

(function ($, undefined) {
    $("#accountRegister").click(function () {
        $.ajax({
            context:$(this), // You need to set context to 'this' element
            //some code here
        });
        return false;
    })
})(jQuery);

これは完全に機能します。これが誰かに役立つことを願っています。

于 2013-03-04T16:50:29.070 に答える