Question

I have a situation where I needed to get data from a form submit(). I have given the url in the action and the values to be sent as input elements. The submit is to a REST web service.

I want to retrieve the values from that submit which cannot be done in normal form.submit(), hence I had to use the ajaxForm() call. I think The handler mentioned for success option is called after successful completion of the REST method. I have also given the async:false option as I want to complete the call and then only proceed.

My problem is that The handler is executed after other code i.e. after the call is made the code after the ajax call is executed and then the handler. This is not right if i give async:false right??

This is my code for your reference:

 <form id="form4" action="http://comp1:8080/RestWSGS/jersey/ExcelHtmlTablePlain" style="display:none"
         enctype="multipart/form-data" method="post">
         <input id ="username" name="username" type="hidden" />
         <input id ="wbk" name="wbk" type="hidden" value="new"  /> 
        <input type="submit"  style="display:none" />
</form>

$(function () {
    $('#form4').submit();
    alert(tbLHSString);
}

function showResponse(responseText, statusText, xhr, $form) {

    if (xhr.readyState == 4) {
        tbLHSString = responseText;
    }
    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + '\n\nThe output div should have already been updated with the responseText.');
    executed == true;
}

On the server console I can see that the REST executes perfectly. But I get the variable as undefined and only then the alert from the showResponse happens.

Please help me make this call synchronous!!!
Kavita

Answer 1

Your AJAX call being synchronous only means that other AJAX calls will have to wait for that one to finish. It does not prevent the JavaScript engine from further execution. I would advise against synchronous calls here, it doesn’t seem to be what you’re after.

You need to be sure that anything that has to wait until after the AJAX call, is called by the callback, and not immediately after the submit itself.

The piece of code where you actually initialize the ajaxForm is not included in your question, but I assume that showResponse is being called after successful AJAX request, and that you want alert(tbLHSString); to be called after that. In that case, you would have to move your alert into showResponse.

If it’s too much code, or for any other reason inconvenient for you to put it in the callback itself, delegate it to a function that is called by the callback.

$(function () {
    $('#form4').submit();
}

function onFormSubmitted() {
    alert(tbLHSString);
}

function showResponse( ... ) {

    ...

    onFormSubmitted();

}