Javascript Event syncronization problem

Question

hi all,

I have a small but very vital issue regarding syncronization of execution of onblur and onclick event handler in javascript.

Actually I have a html form containing one text box and one submit button. onblur is put on textbox this handler executes a method called ajexValidation(). Submit button is associated with onclick hndler which executes ajexSubmitData(). Ajex handler is used in both cases, because onblur the enterd date goes to validate itself from a remote server and retrun back a validated data and assign the data in text field.

In the case of onclick handler submits validated data to remote server for enquiry of other details.

This is the common flow of the page.

But there is some problem..

When user clicks the submit buton first onblur fired then onclick.

Now data is under validation process on the server and onclick starts executing ajexSubmitData() which causes issues because process is - first validate dat-then send validated data to server for enquire, You can say the even syncronization problem.

So all I need is to trace the onblur method completion notification and suspend the onclick methed from execution and wait for that notification. Once get the notification then fire ajexSubmitData().

Any help will be highly appriciated,

-rajneesh

Answer 1

Why not validate in the same method which is sending. Just a thought. Another idea is to keep the submit button disable all the while, until everything gets validated.

Answer 2

You can do this:

var globalFlag = WAITING;
function onBlur_validateData() { // your "AjexValidation"
    sendAjaxRequest( function(data) { // this is the call back on ajax request completion
        if( data was valid )
            globalFlag = VALID;
        else
            globalFlag = INVALID;
    });
}

function onClick_submitData() { // wrapper around your "ajexSubmitData"
    if( globalFlag==WAITING )
        setTimeout( onClick_submitData, 200 );
    else if( globalFlag==INVALID )
        alert( "Your input was invalid!" );
    else ajexSubmitData();
}

function ajexSubmitData() {
    // do your stuff
}

Now, the globalFlag may be a part of an object, or anything that is globally accessible.

Also, make sure that the submit button gets disabled once it is clicked.

NOTE how the setTimeout call is creating a "recursion loop in a thread". This will keep your UI from hanging up while your code waits for the validation to complete.

Cheers,

jrh.

Answer 3

Why not use the form.onsubmit event to fire your validation code and have the validation call the submit function if it succeeds? That way you can override the default submission and if you don't have Javascript still have your fall back route to standard submission?