0

私はjQueryMobileWebサイトを開発しており、jQuery検証プラグインを使用してフォームを検証しています。一部のフォームでは、data-ajax = "false"を設定しましたが、送信ボタンがクリックされたときに読み込みスピナーを表示したいと思いました。スピナーを表示するには、次のコードを使用します

// Display spinner
$(document).delegate('.ajaxSpinner', 'click', function () {
    if($(".ajaxValidate").length == 0 || $(".ajaxValidate").valid()) { // Show spinner if no validation or form is valid
        $.mobile.showPageLoadingMsg();
    }
});

フォーム送信ボタンのクラスは「ajaxSpinner」で、フォーム自体のクラスは「ajaxValidate」です。

ほとんどのフォームでは、これはうまく機能します。送信をクリックしたときにフォームが無効な場合はスピナーは表示されませんが、フォームが有効な場合はスピナーが表示されます。

うまく機能していないフォームが1つだけあります。フォームが有効かどうかに関係なく、スピナーが表示されます。フォームはかなり長いので、手動表示スピナーコードが起動する前に検証が完了していないのではないかと思います。

私はjQueryにあまり精通していないので、誰かが私のコードの欠陥を見つけることができますか？タイミングの問題でしょうか？もしそうなら、クリック機能が起動する前に検証が完了したことを確認する良い方法はありますか？

4

1 に答える 1

1

検証関数内でスピナーを呼び出す必要があると思います。

したがって、検証プラグインを使用すると、通常は次のようになります。

$(".ajaxValidate").validate({
    submitHandler : function(form) {

        // START YOUR SPINNER HERE
        $.mobile.showPageLoadingMsg();

        $(form).ajaxSubmit({

            success: function() {    // YOUR FORM WAS SUBMITTED  SUCCESSFULLY

                // DO SOMETHING WHEN THE FORM WAS SUBMITTED SCESSFULLY ...
                // ...

                // STOP THE SPINNER EVENTUALLY
                //$.mobile.hidePageLoadingMsg()

            }
        });
    }
});

お役に立てれば。これがうまくいくかどうか教えてください。

于 2012-09-15T00:21:36.690 に答える