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

Load that image already in your page with something like:

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

BTW, you could validate all the items, process them and return an ok response (using json headers to avoid th parseJSON) to redirect with just one call.

于 2013-02-24T10:28:06.237 回答
0

对服务器的调用是同步完成的，因此单击处理程序会阻止浏览器显示图像。

据我所知，没有跨浏览器的方式来强制和从 javascript 更新 ui。但是您可能会为此实施自定义解决方案。谷歌搜索应该有助于这一点。

处理这个问题的另一种方法是阻止对 click 事件的默认处理，并在所有异步验证成功后提交表单。

恕我直言，更好的解决方案是在用户填写表单时异步验证每个字段，并且仅在完成所有验证后才启用保存按钮。这可以使用.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 回答