Geek Answers Handbook

How to run javascript code in sequence?

I have a problem with JavaScript where I need a function to run and complete before another function runs.

Here is the code I need to run and finish first. As you can see, I look at all the address input fields on the form and geocode them through the Google Maps API.

$('#form input:text.address').each(function() { var address = $(this); var Geocoder = new google.maps.Geocoder(); Geocoder.geocode({ 'address': address.val() }, function(results, status) { // Store the results in a hidden input field. }); });

After that, it completes completely — that is, after all the Google Maps API responses have returned — I need a form to submit. Here is the current ajax input code that I use:

  $('#form').ajaxForm( { success: function() { ... } } );

The problem I am facing is that the form is submitted before the Google Maps API responded. The ajaxForm() method ajaxForm() callback function, but it still does not beforeSubmit for the function to complete. I understand this is because JavaScript is asynchronous, but I'm not sure how to solve this problem.

Any help is appreciated! Thanks!

+4
source share
3 answers

Call the submit form from the Geocoder.geocode success Geocoder.geocode . Since you have many calls to the same function, set an indicator to indicate when the last call is completed, and then submit the form.

Here is one way ...

 var count = $('#form input:text.address').size(); $('#form input:text.address').each(function() { var address = $(this); var Geocoder = new google.maps.Geocoder(); Geocoder.geocode({ 'address': address.val() }, function(results, status) { // Store the results in a hidden input field. count--; if (count === 0) { //submit form here! } }); });
+7
source

I do not know JQuery, so please forgive me if I leave the base, but it seems to me that you can solve your problem by sending a form inside the geocoding result handler (where it says // Store the results in a hidden input field. ) instead of this, another success handler (which I'm going to call when the AJAX request succeeds?). Is there anything stopping you from doing this this way?

0
source

The problem is that the form can still be submitted before all Google features have uploaded their data? Then we need to disable the submit buttons from the beginning, download all the data, and then turn on the forms again after the download is complete.

The Uing chetan-sastry solution to check when the form is loaded should look something like this.

 var count = $('#form input:text.address').size(); $('#form input:text.address').each(function() { var address = $(this); var Geocoder = new google.maps.Geocoder(); Geocoder.geocode({ 'address': address.val() }, function(results, status) { // Store the results in a hidden input field. count--; if (count === 0) { $('#form').ajaxForm( /* ... */); $('#form input:submit').attr('disabled', '0'); // Enable submit-buttons } }); });

Then, so that the user does not submit the form before the material has been uploaded, you must set the submission to turn off when the page loads.

 <input type="submit" disabled="1" />
0
source

More articles:


All Articles