My ajax request works just fine with Firefox and IE but with Chrome it only displays 4 cities that should not be display with the selected options…
I have a that is populated by states of the U.S. which sends an ajax request onChange
Depending on which state is chosen a different will appear populating it with the different counties of that state and again onChange will send another ajax request.
This is where it goes wrong…
When the 3rd and final appears it is always populated with the same 4 cities no matter what state or county is chosen. I would chalk this up to a bad query but this only happens in Chrome.
Can someone explain to me what is going on?
I am new to ajax so please use stupid talk…
here is the first ajax call…
[php]
<span id="countyWrite"></span>
<select onChange="getCounties();" id="state" name="state" class="city-state-county salePostingSelectWidth">
<optgroup label="State">';
$sqlS = mysql_query("SELECT state.state_id, state.state FROM state ORDER BY state");
echo '
<option disabled selected>Choose a state</option>
';
while($rowState = mysql_fetch_array($sqlS)){
echo '
<option value="'.$rowState['state_id'].'">'.$rowState['state'].'</option>
';
}
[/php]
The second and third call reside in the same php file…
[php]<?php require_once “…/db.php”;
if(isset($_GET['state_id'])){
$sql = mysql_query("SELECT county.county_id, county.county FROM county WHERE county.state_id='".$_GET['state_id']."' ORDER BY county");
echo '<select onchange="getCities();" id="county" name="county" class="salePostingSelectWidth">
<option disabled selected>Choose a county</option>';
while($row = mysql_fetch_array($sql)){
echo '<option value="'.$row['county_id'].'">'.$row['county'].'</option>';
}
echo '</select>';
}
if(isset($_GET['county_id'])){
$sql1 = mysql_query("SELECT city.city_id, city.city FROM city WHERE city.county_id='".$_GET['county_id']."' ORDER BY city");
echo '<select id="city" name="city" class="salePostingSelectWidth">
<option disabled selected>Choose a city</option>';
while($row1 = mysql_fetch_array($sql1)){
echo '<option value="'.$row1['city_id'].'">'.$row1['city'].'</option>';
}
echo '</select>';
}
?>[/php]
and finally hear is the ajax info for this…
[code]function getCounties(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
countyWrite = document.getElementById("countyWrite");
countyWrite.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "ajax_files/salePostingGetCounties.php?state_id=" + document.getElementById("state").value, true);
ajaxRequest.send(null);
}
function getCities(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
cityWrite = document.getElementById("cityWrite");
cityWrite.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "ajax_files/salePostingGetCounties.php?county_id=" + document.getElementById("county").value, true);
ajaxRequest.send(null);
}
[/code]
any help is greatly appreciated