3

特定の ajax 呼び出しが行われたときに現在のページをブロックし、blockUI をメッセージ ボックスとして使用したいと考えています。私はちょうど使用することはできません$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

私のコードは次のとおりです..

bc.find('.submit').click(function (e) {
    e.preventDefault();
    if ($(this).hasClass('lock'))
        return;
    $.blockUI();
    $(this).addClass('lock');
    bc.submit();
});

var validator;
validator = bc.validate({
    ignore: '',
    rules: {
        UserName: {
            required: true
        }
    },
    messages: {
        UserName: 'must have',
    },
    submitHandler: function (form) {
        $.ajax({
            url: '/yyyy/xxxx',
            type: 'POST',
            data: postdata,
            complete: function () {
                bc.find('.submit').removeClass('lock');
            },
            success: function (data) {
                if (data.status == 'OK') {
                    $.blockUI({ message: 'OK' });
                    ......
                }
                else {
                    switch (data.status) {
                        case 'xxx':
                        ......
                    }
                    $.unblockUI();
                }
            },
            error: function () {
                $.unblockUI();
                alert('xxx');
            }
        });
    }
});

シナリオは、.submitボタンをクリックすると、ページがブロックされ、サーバーに対して ajax 呼び出しが行われてデータ応答が取得されるというものです。ajax 呼び出しが成功したら、現在のページのブロックを解除し、data.status が「OK」の場合は、メッセージ ボックスを表示します (これも blockUI プラグインに基づいています)。それ以外の場合は、現在のページにエラーを表示してからブロックを解除します。

2016年に編集、質問の意味を変更する編集があります（おそらくその時点での私の英語力が非常に低いため）、ここで変更をロールバックし、より明確にしました。以下を再度変更しないでください.

しかし実際には、ajax 呼び出しが完了した後でのみ(コードのコードをステップ オーバーしてデバッグajax complete handler)、次を参照してください。

  1. 最初に$.blockUI();処刑された
  2. 実行する$.blockUI({ message: 'OK' })かしないか
  3. その後$.unblockUI()呼ばれる

（上記は、答えのchromeまたはfirefoxデバッグツールの異常な実行シーケンスを意味するものです.ajaxのblockui code完了後に実行されるべきではないため）

それは私が望んでいるものではありません、そして私はこれを理解できません。

4

4 に答える 4

3

beforeSend 関数で Block UI を設定し、complete 関数で unBlockUI を設定して、期待どおりの動作が得られるようにします。

$.ajax({
            url: '/yyyy/xxxx',
            type: 'POST',
            data: postdata,
            beforeSend : function() {
               $.blockUI({ message: 'OK' });
            }, 
            complete: function () {
                bc.find('.submit').removeClass('lock');
                 $.unblockUI();
            },
            success: function (data) {
                if (data.status == 'OK') {

                    ......
                }
                else {
                    switch (data.status) {
                        case 'xxx':
                        ......
                    }

                }
            },
            error: function () {
                $.unblockUI();
                alert('xxx');
            }
        });

これにより、リクエストが送信されるとすぐにUiがブロックされ、完了するとすぐにブロックが解除されます..

于 2012-09-26T04:43:22.093 に答える
0

ajaxBlockUI などの ajax のラッパーを使用して、コードをよりシンプルにすることができます - https://stackoverflow.com/a/28358070/460084を参照してください

blockUI:true を ajaxBlockUI に追加するだけで、UI の実際のブロックとブロック解除は内部で処理されます。

于 2015-02-09T02:25:28.657 に答える
0

問題は、Chrome と Firefox の両方のブラウザーのデバッグ ツールによって引き起こされる実行シーケンスの異常でした。デバッガーで$.blockUI()、ajax 呼び出しの前に実行されるかどうかを確認しました。ajaxで完全なハンドラーをステップオーバーした後、常に実行されていました。たった今、サーバー側のコードにブレークポイントを設定したところ、実行シーケンスが思い通りに正常になることがわかりました。

2016 年 1 月 25 日の更新:

ノート：

  1. この回答は 2012-09-26 に回答されています。nowabnormal execution sequenceを実行するときにchromeまたはfirefoxにまだ何かがあるかどうかはわかりません。ポイント、そして何もヘッペン）async calla break point$.blockUI({ message: 'OK' });F10
  2. 実際、質問のコードにエラーはありません。なぜこのような質問をするかというと、デバッグツールで異常な実行シーケンスが表示されて混乱しているからだと思います。答えはここにあります。コードが機能しない理由などを知りたい場合は、他の回答を見つけるか、新しい質問をすることをお勧めします。
  3. についてabnormal execution sequenceは、今のところ、多分それも頃だと思いblockuiます。$.blockUI()どのように機能するかはわかりませんblock element functionが、クロム実行コールバック スタックの奥深くに格納されている可能性があります。その仮定が正しい場合、ブレークポイントを間違った行に配置する可能性があります（したがって、にブレークポイントを設定する必要があるかもしれませんblockui source code）

また、私はblockui何年も一緒に仕事をしていません。ブロック メッセージ ボックスが必要な場合は、 sweetalert をお勧めします。

于 2012-09-26T06:38:57.843 に答える