Populating select box with neighborhoods of the selected city using AJAX - php

Question

I'm all afternoon trying to run my code, but I'm doing something wrong. I will explain what I need to do.
I need to make when the user selects his city in a select box the neighborhoods corresponding to that city needs to be inserted into another select box. For this, I am using the following logic:
I have two tables in my database, one called cities and other called neighborhoods. The struct of the table cities is:
city_id (PRIMARY_KEY)
city_name
The struct of the table neighborhoods is:
neighborhood_id (PRIMARY_KEY)
city_id (To know what city the neighborhood belongs.)
neighborhood_name
Now in the register page I have this code to populate the user_city_id select box:
<label>City <span style='color: red'>*</span><br/>
<select id='user_city_id' name='user_city_id'>
<option value=''>-- Select a city --</option>
<?php
$sql = "SELECT * FROM cities ORDER BY city_id";
foreach($connection->query($sql) as $city)
{
echo "<option value='{$city['city_id']}'>{$city['city_name']}</option>";
}
?>
</select></label>
Ok, this code part insert the cities in select box with their ID in values and names. All right here.
Below I have the neighborhood select box with:
<label>Neighborhood <span style='color: red'>*</span><br/>
<select id='user_neighborhood_id' name='user_neighborhood_id'>
<option value=''>-- Select a neighborhood --</option>
</select></label>
Now is the hard part, the AJAX. I'm trying using jQuery and JSON to parse the data with the following code:
$(function(){
$('#user_city_id').change(function()
{
if($(this).val())
{
$.getJSON('neighborhood.ajax.php?search=', {city_id: $(this).val(), ajax: 'true'}, function(j)
{
var options = '<option value=""></option>';
for (var i = 0; i < j.length; i++)
{
options += '<option value="' + j[i].neighborhood_id + '">' + j[i].neighborhood_name + '</option>';
}
});
}
else
{
$('#user_neighborhood_id').html('<option value="">-- Select a neighborhood --</option>');
}
});});
The file to process the data is neighborhood.ajax.php. In this file I have:
require_once("db-connect.php");
$city_id = $_GET['user_city_id'];
$neighborhoods = array();
$sql = "SELECT * FROM neighborhoods WHERE city_id = {$city_id} ORDER BY neighborhood_name";
$stmt = $connection->prepare($sql);
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC))
{
extract($row);
$neighborhoods[] = array
(
'neighborhood_id' => $neighborhood_id,
'neighborhood_name' => $neighborhood_name
);
}
echo(json_encode($neighborhoods));
...but simply nothing happens! Of course I'm doing something wrong, but so far I could not solve by myself. I'm trying and nothing.
I had never worked with AJAX. What is missing here?

Answer 1

You need to tell the browser that the data being sent from the server is JSON.
Add this line at the top of neighborhood.ajax.php
header('Content-Type: application/json');

Answer 2

I've found the solution today by myself.
It was a terribly simple solution that I could not see yesterday due to fatigue. I just noticed that I did not send the statement to insert HTML in select box, the options var data. I just inserted it with $('#user_neighborhood_id').html(options).show();. Here are the solution:
$(function(){
$('#user_city_id').change(function()
{
if($(this).val())
{
$.getJSON('neighborhood.ajax.php?search=', {city_id: $(this).val(), ajax: 'true'}, function(j)
{
var options = '<option value=""></option>';
for (var i = 0; i < j.length; i++)
{
options += '<option value="' + j[i].neighborhood_id + '">' + j[i].neighborhood_name + '</option>';
}
$('#user_neighborhood_id').html(options).show();
});
}
else
{
$('#user_neighborhood_id').html('<option value="">-- Select a neighborhood --</option>');
}
});});