Waiting for javascript async callback @ http post

Question

Hi guys,

I'm implementing a small feature and kind of stuck.

I have a button to execute some action, such as

<input type="submit" value="My Button" onclick="javascript:DoSomething();" />

When the user clicks the button the function DoSomething is called.

    function DoSomething()
    {
        var geocoder = new GClientGeocoder();
        geocoder.getLocations(map.getCenter(), function SetField(response)
          {
            if (!response || response.Status.code != 200) 
            {
               alert("Status Code:" + response.Status.code);
            } 
            else 
            {
                var place = response.Placemark[0];
                $('#someHiddenField')[0].value = place.AddressDetails.Country.CountryNameCode;
            }
          });
}

Inside the function a callback function is defined, which performs an async operation that writes a city name in a form field. The problem is that the async callback will try to write in the field after the page is posted. Is there any was I can make the post process wait for the callback result? The callback is defined in the Google Maps API and I cannot avoid it.

Thanks in advance

Answer 1

First you want to modify the onclick handler code to include a return statement like so:

<input type="submit" value="My Button" onclick="javascript:return DoSomething();" />

Then modify the DoSomething function to return false so that sumit will be canceled if it's working on the async callback.. And modify the async callback to post the form when done.

function DoSomething(doPost)
{
        var geocoder = new GClientGeocoder();
        geocoder.getLocations(map.getCenter(), function SetField(response)
          {
            if (!response || response.Status.code != 200) 
            {
               alert("Status Code:" + response.Status.code);
            } 
            else 
            {
                var place = response.Placemark[0];
                $('#someHiddenField')[0].value = place.AddressDetails.Country.CountryNameCode;

                // resubmit the form here 
                $('#yourFormID').submit();
            }
          });

         return false; // cancel the submitting of the form
}

Yet another approach would be to include an onSubmit handler on your form and use a global flag to determine if the submitting of the form is allowed (i.e. if there is no async callback still in flight). When the async callback returns you would clear the flag and resubmit the form from javascript like I demonstrated above, calling the submit() method on the form element.

Answer 2

Use a regular button (type="button") instead of a submit button so that the form is not posted. Post the form from the callback function instead.