Managing multiple AJAX calls to PHP scripts

Question

I have a set of 5 HTML dropdowns that act as filters for narrowing results returned from a mySQL database. The three pertinent filters are for "Province", "Region", and "City" selection, respectively.

I have three functions:

1. findSchools() , which runs when any of the filters (marked with CSS class .filter ) are changed, and fetches the results via AJAX from a PHP script. Once that is done, two other functions are called...

2. changeRegionOptions() , which, upon changing the "Province" filter, and updates the available options using the same method as the first function, but posting to a different script.

3. changeCityOptions() , which runs if the "Region" filter was changed, and updates options, again using the same method.

The problem is that since I want these AJAX functions to run simultaneously, and they by nature run asynchronously, I've tried using $.when to control the execution of the functions, but it doesn't fix the problem.

The functions run, but the Region and City filters return blank (no options); the FireBug report shows absolutely no output, even though the POST request went through. The posted parameter for filter_province gets sent normally, but the one for region gets cut off at the end -- it sends as filter_region= , with no value passed. So I'm presuming my logic is wrong somewhere. The code is below:

// When any of the filters are changed, let's query the database...
$("select.filter").change(function() {
    findSchools();
});

  // First, we see if there are any results...
      function findSchools() {

          var sch_province = document.filterform.filter_province.value;
          var sch_region = document.filterform.filter_region.value;
          var sch_city = document.filterform.filter_city.value;
          var sch_cat = document.filterform.filter_category.value;
          var sch_type = document.filterform.filter_type.value;

          $.post("fetch_results.php",
          { filter_province : sch_province,
            filter_region : sch_region,
            filter_city : sch_city,
            filter_category : sch_cat,
            filter_type : sch_type },

            function(data) {

              $("#results").html("");
              $("#results").hide();
              $("#results").html(data);
              $("#results").fadeIn(600);
            }
          );

    // Once the results are fetched, we want to see if the filter they changed
       was the one for Province, and if so, update the Region and City options
        to match that selection...

            $("#filter_province").change(function() {

                $.when(findSchools())
                .done(changeRegionOptions());

                $.when(changeRegionOptions())
                .done(changeCityOptions());
        });
  };

This is just one of the ways I've tried to solve it; I've tried using an IF statement, and tried calling the functions directly inside the general select.filter.change() function (after findSchools(); ), but they all return the same result.

Any help with this would be great!

Answer 1

You need to turn async to false. After that, your code will be executed line by line.

For example like this, before calling $.post

$.ajaxSetup({async:false});

Answer 2

Try this .hope this is what you were expecting. jsfiddle->sample code