Dependent Drop down list Jquery, AJAX, PHP, MYSQL - php

Question

I am trying to create a dependent drop down list but it doesnt seem to be populating after I make my first selection. Each selection will get data from a MySQL database. In order for the second drop down to have any options (other then a default "select option" value) the user would have to first make a selection on the first drop down After a lot of googling I am having a hard time finding a simple solution to this.
Here is what I have so far,
Drop down lists (I use PHP and MySQL here to generate and output the drop down lists in a getter.php and require_once into an index.php and echo out the drop down)
$accountOptions = "";
$facilityOptions = "";
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
if (!$dbc) {
die("Connection failed: " . mysqli_connect_error());
}
///ACCOUNTS/////
$accountQuery = "SELECT account_id, account_name FROM account";
$accountData = mysqli_query($dbc, $accountQuery);
//loop through data and display all accounts
while ($aRow = mysqli_fetch_array($accountData)) {
$accountOptions .="<option value=\"".$aRow['account_id']."\">" . $aRow['account_name'] . "</option>";
}
$accountDropDown=" <label>Accounts: </label><br>
<select name='account' id='account' onChange='getFacility(this.value)'>
<option selected='selected' disabled='disabled' value=''>Select account</option>
" . $accountOptions . "
</select>";
////FACILITIES/////
$facilityDropDown=" <label>Facility: </label><br>
<select name='facility' id='facility'>
<option selected='selected' disabled='disabled' value=''>Select facility</option>
</select>";
JQuery/AJAX
function getFacility(val) {
$.ajax({
type: "POST",
url: "getfacility.php",
data:'account_id='+val,
success: function(data){
$("#facility").html(data);
}
});
}
getfacility.php
//db connection..
if(!empty($_POST["account_id"])) {
$accountID = $_POST['account_id'];
$sql = "SELECT *, account.account_name FROM facility "
. "INNER JOIN account ON account.account_id = facility.account_id "
. "WHERE facility.account_id = '". $accountID ."'";
$data = mysqli_query($dbc, $sql);
echo "<option selected='selected' disabled='disabled' value=''>Select facility</option>";
while ($fRow = mysqli_fetch_array($data)) {
$facilityOptions .="<option value=\"".$fRow['facility_id']."\">" . $fRow['facility_name'] . "</option>";
}
$facilityDropDown=" <label>Facility: </label><br>
<select name='facility' id='facility'>
<option selected='selected' disabled='disabled' value=''>Select facility</option>
" . $facilityOptions . "
</select>";
}
Right now, when I make a selection on my first drop down, the second one does not populate with anything, where am I going wrong?

Answer 1

Make the changes in getfacility.php,
if your ajax showing 200 ok status and expected response in Network (Console)
//db connection..
if(!empty($_POST["account_id"])) {
$accountID = $_POST['account_id'];
$sql = "SELECT *, account.account_name FROM facility "
. "INNER JOIN account ON account.account_id = facility.account_id "
. "WHERE facility.account_id = '". $accountID ."'";
$data = mysqli_query($dbc, $sql);
echo "<option selected='selected' disabled='disabled' value=''>Select facility</option>";
while ($fRow = mysqli_fetch_array($data)) {
echo "<option value=\"".$fRow['account_id']."\">" . $fRow['account_name'] . "</option>";
}