使用JQuery $ .post进行验证

Question

I got a question concerning asynchronous calls. What I try to do is validate if a given "code" is valid. Refreshing the page is not an option.

The case in a nutshell:
I need to set a variable to true or false based on the reply from the server.
That call is done by using ajax.
The ajax ($.post) request processes the reply from the server and thus sets the variable to true or false.
The value of the variable will then be used as the return value for that function, true or false.
The problem is to only return AFTER the ajax has completed. The asynchronous behavior of ajax prevents this and hanging the browser is not done.

The validation is done by using a function (it will en up being used in an if).

The if looks the following:

if(codeGiven()) {
    // Code ok. Continue to process
} else { msgCodeInvalid(); }

The function codeGiven is the following

function codeGiven(toChk) {
    var codeOK = false; // default answer
    if(toChk) { // only perform call if toChk is not "" of undefined
        $.post(
            "validate.aspx", // server script
            { code: toChk }, // value
            function(data) { // function
                if(data == "true") {
                    codeOK = true; // when true => return will be true
                } else {
                    codeOK = false; // when false => return will be false
                }
            }
        );
    }
    return codeOK; // will be false by default but true when the code is OK
}

the aspx will use the posted "code" and match it against other codes in my database. If a match is found, the reply will be "true". If not, the reply will be "false".

Because an ajax call ($.post) is asynchronous, the result will always be false.

Any suggestions on how to hack my way out of this, besides my idea with a setInterval (a dirty method I know)? A return inside the post didn't work.

Any ideas?

Thanks in advance

Final solution

I came to the realization that I could put my entire logic inside the $.post.

so basically, my logic is the following (warning, it's a deep tree structure):

if(myvar) { // if pid not empty
    $.post( // start validation
        "validator.aspx", // server side validation script
        { code : myvar }, // data to be passed to the server
        function(data, status) { // execute when post happend
            if(data == "true") { // if answer from server == "true"
                /*
                assign variables
                apply other logic
                process effects
                ...
                */
            } else { /* if answer from server == "false" => error: invalid code given */ }
        }
    ).error( /* error: validator did a boom boom. We're sorry :( */ );
} else { /* error: please enter a code */ }

Answer 1

Do your check in the callback or promise of your function, for example:

function checkCodeGiven(toChk) {
    return $.post("validate.aspx", { code: toChk });
}

And then something like:

checkCodeGiven(someVar).then(function(data) {
    if(data == "true") {
        // do whatever you wanted to do for true
    } else {
        // do whatever you wanted to do for false
    }
});

Answer 2

you can : . call the function you want inside the success function of the ajax
OR
. the delayer way :calling the part where you need the if(codeGiven) many times with delays about 100ms so you are sure that it's false or it becomes true at one call, replace this part

if(codeGiven()) {
// Code ok. Continue to process
} else { msgCodeInvalid(); }

with codeGiven();Delayer(0); and declair this

function Delayer(counter) {
        if (codeOK) {
            // Code ok. Continue to process
        } else if (counter <10) { //not sure if it may become true later
            setTimeout(Delayer, 100, counter++);} //call after 0.1 sec
          else {
            msgCodeInvalid();    // no hope to be true
        }
    }

plus codeOK should be declaired globally
hope this works for you EDIT just clarified a bit