0

AJAX 呼び出しでスピナーを使用しています。関数内にバインド コードを実装したので、いつでも使用でき、特定の AJAX 呼び出しでスピナーを使用することを回避できます。たとえば、ユーザー名と電子メールの存在を onkeyup でチェックしていますが、キーが押されるたびにスピナーを表示したくないのは明らかです。

私が実装した方法は機能しますが、クライアント側の検証が完了し、たとえば登録ページで ajax 呼び出しが発生し、エラーが返された場合、キーが押されるたびにユーザー名と電子メールがスピナーを表示し始めます。

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

HTML

<div id="spinner" class="spinner hidden">
    <img id="img-spinner" src="<?php echo base_url(); ?>/images/spinner.gif" alt="Loading"/>
</div>

マスク機能

    function show_hide_loading_mask() {
        $("#spinner").bind("ajaxSend", function() {
            $(this).show();
            $.blockUI({ message: '' }); //Set message to empty to remove default Loading message and show spinner instead
        }).bind("ajaxStop", function() {
            $(this).hide();
            $.unblockUI();
        }).bind("ajaxError", function() {
            $(this).hide();
            $.unblockUI();
        });
    }

フォーム送信呼び出し

$('#frmMyForm').submit(function(){
      if (validate()) {
        show_hide_loading_mask();

        $.ajax({
            type: "POST",
            url: "ajax/path",
            data: $('#frmMyForm').serialize(),
            dataType: "json",

            success: function(data){
               if (data.response == "OK") {
                    console.log('OK');
               } else {
                console.log('NOT OK');
               }
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log('Exception...');
            }
        });
    } else {
        console.log('client side validation failed');
    }
    return false; // do not actually submit
  })

関数の検証:

function validate() {
    var param1 = $('#txtParam1').val();
    var param2 = $('#txtParam2').val();
    return param1.length >= 5 && param2.length >= 5 //return true when both are at least 5 chars long
}

サーバーへの旅行後にこれが起こっている理由は何ですか? ajaxStop がある場合、これは再び無効になります。

ありがとうございました。

4

2 に答える 2

0

ajaxStopスピナーの div でイベントをバインドする必要があるかどうかはわかりません。

あなたがしようとしていることは、.ajaxError()および/または.ajaxComplete( ) を使用して達成できます。

于 2012-08-22T12:33:33.073 に答える
0

これに対する解決策を見つけました。問題は、関数が呼び出されると、ajax 関数にバインドされ続けることでした。

ajax 関数の名前空間を変更することで、この問題を解決できます。私は今2つの機能を持っています:

function show_loading_mask() {
    $(document).bind("ajaxStart.showSpinner", function() {
        $('#spinner').show();
        $.blockUI({ message: '' }); //Set message to empty to remove default Loading message and show spinner instead
    });

    $(document).bind("ajaxStop.showSpinner", function() {
        $('#spinner').hide();
        $.unblockUI();
    });

    $(document).bind("ajaxError.showSpinner", function() {
        $('#spinner').hide();
        $.unblockUI();
    });
}

function no_loading_mask() {
    $(document).unbind('.showSpinner');
}

次に、すべての ajax 呼び出しの前に、それに応じて上記のメソッドを呼び出します。このようにして、必要な ajax 呼び出しに対してのみスピナーを表示します。

于 2012-08-22T13:06:42.887 に答える