Note that there are some explanatory texts on larger screens.

plurals
  1. POManaging multiple AJAX calls to PHP scripts
    primarykey
    data
    text
    <p>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.</p> <p>I have three functions:</p> <ol> <li><p><code>findSchools()</code>, which runs when any of the filters (marked with CSS class <code>.filter</code>) are changed, and fetches the results via AJAX from a PHP script. Once that is done, two other functions are called...</p></li> <li><p><code>changeRegionOptions()</code>, 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.</p></li> <li><p><code>changeCityOptions()</code>, which runs if the "Region" filter was changed, and updates options, again using the same method. </p></li> </ol> <p>The problem is that since I want these AJAX functions to run simultaneously, and they by nature run asynchronously, I've tried using <code>$.when</code> to control the execution of the functions, but it doesn't fix the problem.</p> <p>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 <code>filter_region=</code>, with no value passed. So I'm presuming my logic is wrong somewhere. The code is below:</p> <pre><code>// 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()); }); }; </code></pre> <p>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 <code>select.filter.change()</code> function (after <code>findSchools();</code> ), but they all return the same result.</p> <p>Any help with this would be great!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload