How to stop compiler while ajax request not complete?

Question

I have a form and in this a field is parent keywords as secret key. When i validate this form using javascript it working very well. i also check secret key that i associated with any parent or not. if not then galg set 0. Ajax working ver well and it check also that secret key found or not. if found then it is correct or not, but compiler not wait to ajax complete. it submit the form and don't wait the ajax response. I want while ajax request not complete then it resume for some time and then next check other filed.

function PiggyBankValidation()
{
    var flag = 1;
    var Namepattern     = /^[a-zA-Z0-9 ]{1,40}$/; 
    var account_name    = $("#account_name");
    var holding_terms   = $("#holding_terms");
    var goal            = $("#goal");
    var parent_keywords = $("#parent_keywords");
    var terms           = $("#terms");

    //terms.attr("checked",false)
    if(account_name.val().trim() == ""){
        account_name.next('.JErrorMsg').text("Please Enter Account Name !");
        flag = 0;
    }else if(Namepattern.test(account_name.val().trim()) == false){
        account_name.next('.JErrorMsg').text("Please Enter Correct Account Name !");
        flag = 0;
    }else{
        account_name.next('.JErrorMsg').text("");
    }
    if(holding_terms.val().trim() == ""){
        holding_terms.next('.JErrorMsg').text("Please Select Holding Terms !");
        flag = 0;
    }else if(Namepattern.test(holding_terms.val().trim()) == false){
        holding_terms.next('.JErrorMsg').text("Please Select Holding Terms !");
        flag = 0;
    }else{
        holding_terms.next('.JErrorMsg').text("");
    }

    if(goal.val().trim() == ""){
        goal.next('.JErrorMsg').text("Please Enter Goal !");
        flag = 0;
    }else if(Namepattern.test(goal.val().trim()) == false){
        goal.next('.JErrorMsg').text("Please Enter Correct Goal !");
        flag = 0;
    }else{
        goal.next('.JErrorMsg').text("");
    }

    if(parent_keywords.val().trim() == ""){
        parent_keywords.next('.JErrorMsg').text("Please Enter Parent Keywords !");
        flag = 0;
    }else if(Namepattern.test(parent_keywords.val().trim()) == false){
        parent_keywords.next('.JErrorMsg').text("Please Enter Correct Parent Keywords !");
        flag = 0;
    }else{
        parent_keywords.next('.JErrorMsg').text("Please wait...");
        $.ajax({
            url:siteurl+"ChildControlPanel/CheckSecretKey",
            type: "POST",
            data:{key:parent_keywords.val().trim()},
            beforesend : function(){flag = 0;},
            success : function(data){
                if(data){
                    response = JSON.parse(data);
                    if(response.success){
                        parent_keywords.next('.JErrorMsg').text("");
                    }
                    if(response.error){
                        parent_keywords.next('.JErrorMsg').text(response.error);
                        flag = 0;
                    }
                }else{
                    parent_keywords.next('.JErrorMsg').text("Please try again !");
                    flag = 0;
                }
            },
        });

    }
    if(terms.prop("checked") == false){
        terms.next('.JErrorMsg').text("Please Accept terms !");
        flag = 0;
    }
    else
    {
        terms.next('.JErrorMsg').text("");
    }
    ///alert(flag);
    if(flag == 1)
    {
        alert("submit");
        //return  true;
        return false;
    }
    else
    {
        return false;
    }
}

i calling this function here

$(document).ready(function(){
    $("#piggyBankSetup input").keypress(function(e){
            if(e.keyCode == 13){
                if(PiggyBankValidation()){
                    document.piggyBankSetup.submit();
                }
            }
        });
    $("#AddAccount").click(function(){
        if(PiggyBankValidation()){
            document.piggyBankSetup.submit();
        }
    });
});

When this function call and all fields have correct value only parent keywords (secret key) is wrong then it submit the form.

Use a call back to your ajax after sucess and in that call back do the form submission. Or use `async : false` in your ajax but that is not a good choice to do. — 웃웃웃웃웃, Aug 13 '14 at 06:51
i can't use call back in ajax. becasue another fields are there if here i add callback then it not validate other fields. — Jitendra, Aug 13 '14 at 06:55

score 0 · Accepted Answer · answered Aug 13 '14 at 06:57

0

Try

Inside $.ajax request set 'async':false , this will make wait till request completed , otherwise you can set ajax request outside validation function and check for valid with adding some classes (check with jQuery.hasClass('class name')) to control or setting a global variable

answered Aug 13 '14 at 06:57

Ajay Peter

153
4

`async: false` is pretty much always a bad recommendation as it will lock up the browser and user's will not enjoy the browser experience. The solution here is to program correct with async ajax. – jfriend00 Aug 13 '14 at 07:13

score 0 · Answer 2 · edited May 23 '17 at 12:20

Ajax is asynchronous. That's what the "A" in Ajax stands for. It's also asynchronous for a reason because that keeps the browser responsive during the network request which can take many seconds. You may want to read this reference:

How do I return the response from an asynchronous call?

As such, you need to prevent the default submission of your form (probably using event.preventDefault() but you don't show us the code that that would go in). And, then when the validation passes, you can then programmatically submit your form.

You will also need to correct your code to work with an asynchronous response. ALL code that uses the Ajax response needs to be in the success handler or called from the success handler. You can't set a flag there and then use that flag outside the success handler. The timing will not work properly .

If you need to somehow do multiple operations as part of the validation, then you will have to write async code that can handle multiple operations. This is all part of learning how to write proper async code and is required for good javascript development. You cannot return an async result from your PiggyBankValidation() function because the asynchronous results will not yet be available when PiggyBankValidation returns.

If you have multiple async operations, you can use callbacks or promises to help structure your async code. If you have only the one async operation, then just put all the other code in the success handler (or in a callback called from the success handler).

How to stop compiler while ajax request not complete?

2 Answers2