5

loading一連の ajax リクエストを行う前に、onclick がボディにクラスを適用する (カーソルを「待機」に設定する)ボタンを作成しようとしています。

コードは次のとおりです。

$('#addSelected').click(function(){
    $('body').addClass('loading');

    var products = $(':checkbox[id^=add_]:checked');
    products.each(function(){
        var prodID = $(this).attr('id').replace('add_', '');
        var qty = $('#qty_' + prodID).val();
        if($('#prep_' + prodID).val())
        {
            prodID += ':' + $('#prep_' + prodID).val();
        }
        // Have to use .ajax rather than .get so we can use async:false, otherwise
        // product adds happen in parallel, causing data to be lost. 
        $.ajax({
            url: '<?=base_url()?>basket/update/' + prodID + '/' + qty,
            async: false,
            beforeSend: function(){
                $('body').addClass('loading');
            }
        });
    });
});

やってみました

$('body').addClass('loading');

リクエストの前と beforeSend コールバックの両方ですが、違いはありません。

firebug では、リクエストが完了するまでクラスbodyを取得できないことがわかります。loading

何か案は？

私はこれをクリーンであると考える方法でソートしていませんが、解決策を見つけました。

ブロックの末尾のsetTimeout(function(){上と下に追加するvar products...と、そのチャンクが遅延するため、最初に addClass が発生します。}, 1);products.each

4

2 に答える 2

3

.ajaxStart jquery イベントを見てください。

それはこのように見えるでしょう

$('#addSelected').ajaxStart(function() {
  $('body').addClass('loading');
});

編集: jquery のドキュメントを調べたところ、async = false を設定するとブラウザーが他のアクションからロックされることがわかりました。jquery のドキュメントから:

asyncBoolean デフォルト: true

デフォルトでは、すべてのリクエストは非同期で送信されます (つまり、これはデフォルトで true に設定されています)。同期リクエストが必要な場合は、このオプションを false に設定します。同期リクエストはブラウザを一時的にロックし、リクエストがアクティブな間はすべてのアクションを無効にする場合があることに注意してください。

これが問題の原因になっている可能性がありますか? ajaxStart イベントでコンソールにログインしてみて、起動しているかどうかを確認してください。

于 2010-03-31T14:09:34.270 に答える
0

jQuery のどのバージョンを使用していますか? 私は非常によく似た機能を実行しており、呼び出しは常に ajax 呼び出しの前に行われます。私はjQueryのv1.4.2を使用しているので、問題は古いバージョンですか?

また、「each()」ループを実行しているため、.ajax 呼び出しの前に必ず addClass を呼び出す必要があります。

于 2010-03-31T14:25:34.727 に答える