Ok so i have created a Javascript/PHP/Ajax application. I have a sequence of 6 select boxes. The first is hardcoded in HTML. When you change the selection it sends a variable via Ajax to PHP which uses the variable to query the database. When the second box changes it then sends the 2 variables from the previous select boxes.
Each time a select box is changes it adds another variable to send. In the end there is a total of 5 or 6 variables which is all good, everything is functioning well and almost doing what i want it to do.
My problems occur with select boxes 3 and 6.
Initially they work fine. But when you go back to change select box 2, number 3 does not refresh. The values stay the same as before. The same with number 6, when i change number 3, box 4 changes and in sequence box 5 changes, however box 6 remains the same as the previous query. All Ajax code used is identical with just variable names and relevant Elements changed.
Can anybody help? i will post the link to the application and the ajax code in question.
Just so you know only select box 1 is visible initially, the rest are generated by php/ajax onchange.
Heres the code in question
Code:
function getHTTPObject(){
if (window.ActiveXObject)
return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
return new XMLHttpRequest();
else {
alert("Your browser does not support AJAX.");
return null;
}
}
function doWork(){
var selectBox = document.getElementById("SelectManufacturer"); // get HTML select box by id
httpObject = getHTTPObject();
httpObject.open("GET", "http://4udev.refixstudios.co.uk/wp-content/martTest/bNbAjax.php?inputText="
+selectBox.options[selectBox.selectedIndex].text , true);
httpObject.onreadystatechange=function()
{
if (httpObject.readyState==4 && httpObject.status==200)
{
document.getElementById('selectModel').innerHTML = httpObject.responseText;;
}
}
httpObject.send()
}
function networkSelector()
{
var selectBox2 = document.getElementById("SelectManufacturer"); // get HTML select box by id
var selectModel = document.getElementById("modelSelector");
httpObject2 = getHTTPObject();
httpObject2.open("GET", "http://4udev.refixstudios.co.uk/wp-content/martTest/NetworkAjax.php?inputText2=" +selectBox2.options[selectBox2.selectedIndex].text +"&modelText2="+selectModel.options[selectModel.selectedIndex].text, true);
httpObject2.onreadystatechange = function()
{
if(httpObject2.readyState == 4 && httpObject2.status==200){
document.getElementById("networkSelect").innerHTML = httpObject2.responseText;
}
}
httpObject2.send();
}
function minuteSelector(){
var selectBox3 = document.getElementById("SelectManufacturer"); // get HTML select box by id
var selectModel3 = document.getElementById("modelSelector");
var NetworkSelect3 = document.getElementById("networkSelector");
httpObject3 = getHTTPObject();
httpObject3.open("GET", "http://4udev.refixstudios.co.uk/wp-content/martTest/minuteAjax.php?inputText3="+selectBox3.options[selectBox3.selectedIndex].text+"&modelText3="+selectModel3.options[selectModel3.selectedIndex].text+"&networkText3="+NetworkSelect3.options[NetworkSelect3.selectedIndex].text, true);
httpObject3.onreadystatechange = function(){
if(httpObject3.readyState == 4 && httpObject3.status==200){
document.getElementById("minuteSelect").innerHTML =httpObject3.responseText;
}
}
httpObject3.send();
}
function textSelector(){
var selectBox4 = document.getElementById("SelectManufacturer"); // get HTML select box by id
var selectModel4 = document.getElementById("modelSelector");
var networkSelect4 = document.getElementById("networkSelector");
var minuteSelect4 = document.getElementById("minutesSelector");
httpObject4 = getHTTPObject();
httpObject4.open("GET", "http://4udev.refixstudios.co.uk/wp-content/martTest/textAjax.php?inputText4=" +selectBox4.options[selectBox4.selectedIndex].text+"&modelText4="+selectModel4.options[selectModel4.selectedIndex].text+"&networkText4="+networkSelect4.options[networkSelect4.selectedIndex].text +"&minuteText4="+minuteSelect4.options[minuteSelect4.selectedIndex].text, true);
httpObject4.onreadystatechange = function(){
if(httpObject4.readyState == 4 && httpObject4.status==200){
document.getElementById("textSelect").innerHTML =httpObject4.responseText;
}
}
httpObject4.send();
}
function dataSelector(){
var selectBox5 = document.getElementById("SelectManufacturer"); // get HTML select box by id
var selectModel5 = document.getElementById("modelSelector");
var networkSelect5 = document.getElementById("networkSelector");
var minuteSelect5 = document.getElementById("minutesSelector");
var textsSelector5 = document.getElementById("textsSelector");
httpObject5 = getHTTPObjectAgainB();
httpObject5.open("GET", "http://4udev.refixstudios.co.uk/wp-content/martTest/dataAjax.php?inputText5="+selectBox5.options[selectBox5.selectedIndex].text+"&modelText5="+selectModel5.options[selectModel5.selectedIndex].text+"&networkText5="+networkSelect5.options[networkSelect5.selectedIndex].text +"&minuteText5="+minuteSelect5.options[minuteSelect5.selectedIndex].text+"&textText5="+textsSelector5.options[textsSelector5.selectedIndex].text, true);
httpObject5.onreadystatechange = function (){
if(httpObject5.readyState == 4){
document.getElementById("dataSelect").innerHTML = httpObject5.responseText;
}
}
httpObject5.send()
}
The best way to test is buy selecting any manufacturer and model then network, after that select Apple---The New Ipad 4G, this is how you notice that it does not change. This selection should only bring back Orange as network
And Heres the PHP that it calls
Code:
<?php
if (isset($_GET['inputText2']))
{
$manufacturer = ($_GET['inputText2']);
if (isset ($_GET['modelText2']))
{
$model = ($_GET['modelText2']);
}
}
$conA = mysql_connect("localhost","****","*****");
if (!$conA)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("refixstu_4udev", $conA);
$selectApplea = mysql_query("SELECT DISTINCT network FROM wp_selector_apple WHERE model = '$model' ");
$selectBlackberry = mysql_query("SELECT DISTINCT network FROM wp_selector_blackberry WHERE model = '$model'");
$selectDoro = mysql_query("SELECT DISTINCT network FROM wp_selector_doro WHERE model = '$model'");
$selectHTC = mysql_query("SELECT DISTINCT network FROM wp_selector_htc WHERE model = '$model'");
$selectLG = mysql_query("SELECT DISTINCT network FROM wp_selector_lg WHERE model = '$model'");
$selectMotorola = mysql_query("SELECT DISTINCT network FROM wp_selector_motorola WHERE model = '$model'");
$selectNokia = mysql_query("SELECT DISTINCT network FROM wp_selector_nokia WHERE model = '$model'");
$selectSamsung = mysql_query("SELECT DISTINCT network FROM wp_selector_samsung WHERE model = '$model'");
$selectSony = mysql_query("SELECT DISTINCT network FROM wp_selector_sony WHERE model = '$model'");
$selectSonyE = mysql_query("SELECT DISTINCT network FROM wp_selector_sonyericsson WHERE model = '$model'");
$selectZte = mysql_query("SELECT DISTINCT network FROM wp_selector_ZTE WHERE model = '$model'");
?>
<select id="networkSelector" style="width:100px;" align="right" onchange="minuteSelector()">
<option> Select Network </option>
<?php
// Start Apple Testing
if($manufacturer == "Apple")
{
while($rowa = mysql_fetch_array($selectApplea))
{
foreach(array_unique($rowa) as $model)
{
echo"<option>"; echo $rowa['network']; echo"</option>";
}
}
}
else if($manufacturer == "BlackBerry")
{
while($rowa = mysql_fetch_array($selectBlackberry))
{
foreach(array_unique($rowa) as $model)
{
echo"<option>"; echo $rowa['network']; echo"</option>";
}
}
}
else if($manufacturer == "Doro")
{
while($rowa = mysql_fetch_array($selectDoro))
{
foreach(array_unique($rowa) as $model)
{
echo"<option>"; echo $rowa['network']; echo"</option>";
}
}
}
else if($manufacturer == "HTC")
{
while($rowa = mysql_fetch_array($selectHTC))
{
foreach(array_unique($rowa) as $model)
{
echo"<option>"; echo $rowa['network']; echo"</option>";
}
}
}
else if($manufacturer == "LG")
{
while($rowa = mysql_fetch_array($selectLG))
{
foreach(array_unique($rowa) as $model)
{
echo"<option>"; echo $rowa['network']; echo"</option>";
}
}
}
else if($manufacturer == "Motorola")
{
while($rowa = mysql_fetch_array($selectMotorola))
{
foreach(array_unique($rowa) as $model)
{
echo"<option>"; echo $rowa['network']; echo"</option>";
}
}
}
else if($manufacturer == "Nokia")
{
while($rowa = mysql_fetch_array($selectNokia))
{
foreach(array_unique($rowa) as $model)
{
echo"<option>"; echo $rowa['network']; echo"</option>";
}
}
}
else if($manufacturer == "Samsung")
{
while($rowa = mysql_fetch_array($selectSamsung))
{
foreach(array_unique($rowa) as $model)
{
echo"<option>"; echo $rowa['network']; echo"</option>";
}
}
}
else if($manufacturer == "Sony")
{
while($rowa = mysql_fetch_array($selectSony))
{
foreach(array_unique($rowa) as $model)
{
echo"<option>"; echo $rowa['network']; echo"</option>";
}
}
}
else if($manufacturer == "Sone Ericsson")
{
while($rowa = mysql_fetch_array($selectSonyE))
{
foreach(array_unique($rowa) as $model)
{
echo"<option>"; echo $rowa['network']; echo"</option>";
}
}
}
else if($manufacturer == "Zte")
{
while($rowa = mysql_fetch_array($selectLG))
{
foreach(array_unique($rowa) as $model)
{
echo"<option>"; echo $rowa['network']; echo"</option>";
}
}
}
mysql_close($conA);
?>
</select>
Here is a brief rundown of the SQL
1st manufacturer is clicked. Example - Apple is passed to ajax. SQL - SELECT DISTINCT model FROM AppleTable; This populates the Model select box and echos it to the sceen. Next step. Model Select box onchange() - sends Apple and iPhone 4S 16GB as variables to Ajax. SQL - SELECT DISTICNT Network FROM AppleTable WHERE Model = 'iPhone 4S 16GB';This echos the list of DISTINCT networks (O2, Orange, T Mobile, Vodafone) to the select box. This patern of sending variables carries on through out the application. The model box always changes when new manufacturer is selected.
Take a look at the application and see what you think
http://4udev.refixstudios.co.uk/csv-test/
Before you post, read our: 
