0

ajaxを介してフォームを検証するボタンクリックで読み込み中の画像を表示しようとしていますが、読み込み中の画像は少し遅れて表示されます（サーバーにアップロードすると、画像が表示されるまでに2秒以上かかります）。しかし、ボタンクリックイベントの瞬間にそれが欲しいです。私のコードを以下に示します。

$("#Save").click(function() {
    // shows theloading image (here I am expecting the loading image, it never shows.)
    $("#load_img").show();  
    // calls ajax for vaidation
    lookUpValidation($("#item1")) 
    // calls ajax for vaidation
    lookUpValidation($("#item2"))
})
function lookUpValidation(this_element,id) {
    url = "/validate/lookupid/"+id,
    lookUpValidationResult  = false;
    lookUpValidationData    = false;    
    if(this_element.val()!="") {
        $.ajax({
            url : url,
            type : "POST",
            async : false,
            data : {    
                "value"   : this_element.val()
            },      
            beforeSend : function(data) {
                // shows theloading image
                $("#load_img").show();
            },
            complete : function(data) {             
                if(data) {
                    var res = JSON.parse(data.responseText);
                    lookUpValidationData = res;
                        if(res.field) {    
                            lookUpValidationResult = 1;
                        }
                        else
                            // not found
                            lookUpValidationResult = 2;

                    }
                    else {
                        // not found
                        lookUpValidationResult = 2;
                    }       
                }
            });
        }
        else {
            // null
            lookUpValidationResult = 3;
        }
        return lookUpValidationResult;
}

HTML

<div class="k-loading-image" id="load_img" style="display:none;">
    <div class="k-loading-color">
    </div>
</div>
4

2 に答える 2

0

サーバーへの呼び出しは同期的に行われるため、クリック ハンドラーはブラウザーが画像を表示するのをブロックします。

私の知る限り、JavaScript から強制的に UI を更新するクロスブラウザの方法はありません。しかし、このためのカスタム ソリューションを実装することで運が良いかもしれません。これにはグーグル検索が役立ちます。

これを処理する別の方法は、クリック イベントの既定の処理を防止し、すべての非同期検証が成功した後にフォームを送信することです。

私見のより良い解決策は、ユーザーがフォームに入力している間に各フィールドを非同期的に検証し、すべての検証が完了したときにのみ保存ボタンを有効にすることです。これは.blur()、ユーザーが次の入力に移動したときに各入力が検証されるように、 を使用して実行できます。.keypress()ユーザーが入力している間の検証は、とを組み合わせて実装できますsetTimeout()。これを説明する短い例を次に示します。

<!doctype html>
<html lang="en">
<head></head>
<body>
    <form id="form" action="form.html">
        <label for="item1">Validate email on blur:</label><input id="item1" type="text"/><span id="item1-status">Invalid</span><br/>
        <lavel for="item2">Validate email while writing</lavel><input id="item2" type="text"/><span id="item2-status">Invalid</span><br/>
        <button id="Save" type="submit">Save</button>
    </form>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    $(function () {
        var validState = {
            "set": function (name, state) {
                this[name] = state;
                updateUI();
            },
            "item1": null,
            "item2": null
        }

        function formIsValid() {
            var res = true;
            for(var name in validState) {
                res = res && validState[name];
            }

            return res;
        }

        function validString(val) {
            return val==null ? ""
                : val ? "Valid" : "Invalid"
        }

        function updateUI() {
            $("#item1-status").text( validString(validState.item1) );
            $("#item2-status").text( validString(validState.item2) );
            $("#Save").prop("disabled", !formIsValid());
        }

        function isEmail(str) {
            return /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i.test(str);
        }

        function validateItem1() {
            validState.set("item1", isEmail($("#item1").val()));
        }
        function validateItem2() {
            validState.set("item2", isEmail($("#item2").val()));
        }

        // Validate after loosing focus
        $("#item1").blur(validateItem1);

        // Use timeout to validate when user has stopped typing
        $("#item2").blur(function() {
            var handle = $(this).data("validation-timer");
            if( handle ) clearTimeout(handle);
            validateItem2();
        }).keydown(function () {
            var self = $(this);
            var handle = self.data("validation-timer");
            if( handle ) clearTimeout(handle);
            var new_handle = setTimeout(validateItem2, 1000);
            self.data("validation-timer", new_handle);
        });

        updateUI();
    });
    </script>
</body>
</html>
于 2013-02-24T08:22:32.380 に答える
0

次のような方法で、すでにページにあるその画像をロードします。

body {
   background: #fff url(path/to/load_image.gif?) no-repeat -1000px -1000px;
}

ところで、すべての項目を検証して処理し、OK 応答を返し (parseJSON を回避するために json ヘッダーを使用)、1 回の呼び出しでリダイレクトすることができます。

于 2013-02-24T10:28:06.237 に答える