Geek Answers Handbook

Image loading after a long delay when a button is pressed causes jquery ajax

I am trying to show a loading image by clicking a button that will validate the form via ajax, but the loading image is displayed only after some delay (when uploading to the server, it takes more than 2 seconds to display the image). But I want it at the moment the button is pressed. My code is below.

$("#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>
0
source share
2 answers

The server is called synchronously, so the click handler blocks the display of the browser.

As far as I know, there is no cross-browser way to force update and update ui from javascript. But you may be lucky with the introduction of a special solution for this. A Google search should help with this.

Another way to handle this would be to prevent the default processing of the click event and submit the form after the asynchronous validation was successful.

IMHO's best solution is to check each field asynchronously while the user fills out the form and only activates the save button when all checks are completed. This can be done with .blur() so that each entry is checked when the user moves on to the next. User input validation can be implemented by a combination of .keypress() and setTimeout() . Here is a brief example to illustrate this:

 <!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.-]+\.[AZ]{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>
0
source

Upload this image to your page using something like:

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

By the way, you can check all the elements, process them and return an ok response (using json headers to avoid using parseJSON) to redirect with just one call.

0
source

More articles:


All Articles