jquery php get two different arrays of data in success function - php

Question

I have a drop down menu for 'Countries'. Onchange of the dropdown ,i want to change the values of two other drop down menus.
While i do it for a single dropdown,it works just fine.But i seem to get confused when it comes to changing the data for both the dropdown menus.
This is what i am doing.
$.post(
base_url+'hostel_admin/functions/functions.php',
{country_code:country_code}
).done(function(data){
$("#continent").html(data.continents);
$("#continent").html(data.cities);
});
In functions.php
if($_SERVER['REQUEST_METHOD']=='POST' && (isset($_POST['country_code'])))
{
change_continents($continent_id);
change_cities($country_code);
}
function change_continents($code)
{
$sql = "select id as Code,name as Name from hostel_continent";
$result = mysql_query($sql);
$output['continents'] = "<option value='0'>Select One</option>";
while($row = mysql_fetch_assoc($result))
{
$data = $row['Name'];
$val = $row['Code'];
if($val==$code)
{
$output .= "<option value='$val' selected='selected'>$data</option>";
}
else{
$output .= "<option value='$val'>$data</option>";
}
}
echo $output;
}
function change_cities($country_code)
{
$sql = "select ID,Name,District from hostel_city where CountryCode='$country_code'";
$result = mysql_query($sql);
$output['cities'] = "<option value='0'>Select One</option>";
while($row = mysql_fetch_assoc($result))
{
$data = $row['Name'];
$val = $row['District'];
$city_id = $row['ID'];
$output .= "<option value='$city_id' selected='selected'>$data.' / '.$val</option>";
}
echo $output;
}
I am able to do it for a single dropdown,can someone tell where exactly and what is going wrong?.
Thanks in advance.

Answer 1

First thing is first, separate your data. You are using PHP to echo html, that is the normal use case, but here I think json might help more.
So first to something like this on the php side:
$ajaxResponse = [];
Then for each of the data you can do this:
#in the change_continents function
$ajaxResponse["continents"][] = $row;
........
#in the change_cities
$ajaxResponse["cities"][] = $row;
Then do the output after each call
echo json_encode($ajaxResponse);
On the javascript side, you will now need to actually create the the html you are going to push to the objects.
First do not do $('').html() twice on the same selector, the second one will overwrite the first one. You will need tow selectors.
Then you will need to do something like this:
$.post(
base_url+'hostel_admin/functions/functions.php',
{country_code:country_code}
).done(function(data){
var continents = '<select {select options}>';
if(typeof(data)=='string')data=JSON.decode(data);
for( key in data.continents)
continents+='"<option value="'+data.continents.Code+'" selected='selected'>"'+data.continents.Name+'" </option>"; '
continents+="</select>"
$("#continent").html(continents);
var countries = '<select {select options}>';
for( key in data.countries)
continents+='"<option value="'+data.countries[key].Code+'" selected='selected'>"'+data.countries[key].Name+'" </option>"; '
continents+="</select>
$("#countries").html(data.cities);
});
The code above might not be fully functional, but should lead you in the right direction.
The best way would be to make the functions on the php side return the data you need, and then format it in another function, so if you need json you can output json, if you need html you can output html.
Second, on the javascript side, you could use "underscore" and it's templateing engine to do the hard work for you.
Hope this helps.