Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Simultaneous Ajax requests with select boxes

    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/
    Last edited by VIPStephan; 11-03-2012 at 01:30 PM. Reason: fixed code BB tag

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,041
    Thanks
    23
    Thanked 589 Times in 588 Posts
    You should not link to a site your going to work on and change things on us. How are we going to figure out whats wrong with a moving target?

    What I got so far:
    The app isn't finished. Select ZTE or Samsung and there is no MODEL and the app shuts down.
    If you pick Sony any MODEL and NETWORK does not work.
    If you go back and change one of your selections all dropdown after that should disapear excect for the next one. If you cahnge the MODEL only the NETWORK select should stay showing.

    And I'll not post my ideas about the database.

  • Users who have thanked sunfighter for this post:

    M4rt1985 (11-04-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok i appreciate your comments and i was making minor changes to the site at the time (probably). From looking at the code can you see anything wrong?

    I mearly wanted advice on the situation. Why the network wouldn't change. The inspect element console says that onchange is not a function after the first occasion.

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i also tried hiding the select boxes too but after changing the selection the box wouldn't show at all

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i have solved the problem. My onchange called networkSelector(). I had a HTML form element named the same and that was conflicting. I have simple changed the function name and it works on my test server yay! thank you for the help. Muchly appreciated


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •