SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot dawgbone's Avatar
    Join Date
    Dec 2003
    Location
    Brampton
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Populating selectbox in XML

    I'm currently trying to populate several select boxes through XML.

    How it work is the first one just gets the values from the XML file. The second box input is dependant on the the result of the first selectbox.

    i.e. the user selects a departure city, and the destinations available are dependant on what city they select.

    here is what I've done so far:

    PHP Code:

    <html>

    <
    head>

    <
    title>Redtag Search Engine</title>

    <
    script language "javascript">

    // Selects the xml file and loads the data.

    function getDepartures(){

      var 
    mozillaFlag false;

      var 
    XMLHttpRequestObject false;

      if(
    window.XMLHttpRequest){

        
    XMLHttpRequestObject = new XMLHttpRequest();

        
    XMLHttpRequestObject.overrideMimeType("text/xml");  
      
        
    mozillaFlag true;

      }

      else if(
    window.ActiveXObject){

        
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");

      }

      if(
    XMLHttpRequestObject){

        
    XMLHttpRequestObject.open("GET""ajax.php"true);

        
    XMLHttpRequestObject.onreadystatechange = function(){

          if(
    XMLHttpRequestObject.readyState == && XMLHttpRequestObject.status == 200){

            var 
    xmlDocument XMLHttpRequestObject.responseXML;

            if(
    mozillaFlag){

              
    removeWhitespace(xmlDocument);

            }

            
    displayDeparture(xmlDocument);

          }

        }

        
    XMLHttpRequestObject.send(null);

      }

    }





    </script>

    <script language = "javascript" src="firefox_xml.js">

    // this is just the function to remove the whitespace, and is not relevant.

    </script>

    <script language = "javascript" src="getxml.js">

    // this is the script to populate the first selectboxes with the XML data.

    </script>

    <script language = "javascript" src="getDestinations.js">

    // this is the script thats houses the function that gets the XML file data to populate the 2nd checkbox

    </script>

    </head>

    <body onload = "getDepartures()">

    <h1>Redtag Search Engine</h1>

    <form>

      <select size= "1" id= "departureList" onchange = "getDestinations()">

     <!-- When the user selects a departure location, it calls the function to get destinations.--!>
      
        <option>Select a Departure City</option>

      </select>

      <br />
      <br />

      <select size= "1" id= "destinationList">
      
        <option>Select a Destination</option>

      </select>

    </form>

    </body>

    </html> 
    So far, it grabs the xml data and populates the first checkbox without any issues.

    It also loads the XML data to be used for the 2nd drop down menu without any issues.

    I can also display data in the second XML document if I hard code which node I want to display. Ideally, it would just grab the counter value from the first selectbox, and I could use it for the second selectbox.

    here is my code for that

    PHP Code:

    function displayDeparture(xmldoc){  // this function loads the data for the first selection box.

      
    var xmlNodegatewaysNodegatewayNodedepartureNodedisplayTextnodeIndexselectDeparture;

      
    selectDeparture document.getElementById("departureList");

      
    xmlNode xmldoc.documentElement;

      
    gatewaysNode xmlNode.firstChild;

      for(
    nodeIndex 0nodeIndex gatewaysNode.childNodes.lengthnodeIndex++){

        
    gatewayNode gatewaysNode.childNodes[nodeIndex];

        
    departureNode gatewayNode.firstChild.nextSibling;

        
    departureIndex nodeIndex 1;

        
    selectDeparture.options[departureIndex] = new Option(departureNode.firstChild.data);

      
    // I'd like to find a way to send the departureIndex value to the displayDestination function.

      
    }

    }


    function 
    displayDestination(xmldoc){ // this function loads the data for the first selection box.

      
    var destinationIndexxmlNode2gatewaysNode2gatewayNode2destinationsNodedestinationNodenameNodeselectDestination;

      
    selectDestination document.getElementById("destinationList");

      
    xmlNode xmldoc.documentElement;

      
    gatewaysNode xmlNode.firstChild;

      
    gatewayNode gatewaysNode.childNodes[2];

      
    destinationsNode gatewayNode.lastChild;

      for(
    destinationIndex 0destinationIndex destinationsNode.childNodes.lengthdestinationIndex++){

        
    destinationNode destinationsNode.childNodes[destinationIndex];

        
    nameNode destinationNode.lastChild;

        
    selectIndex destinationIndex 1

        selectDestination
    .options[selectIndex] = new Option(nameNode.firstChild.data);

      }

    In the function displayDestination(); it contains the following:

    gatewayNode = gatewaysNode.childNodes[2];

    that [2] is hardcoded, and ideally, it should reference whichever index is selected by the original dropbox.

    For instance, [2] references all the destinations that are available if you select Calgary. I need to get the number over from if I were to select any other value.

    Here's how it currently works:

    http://www.offcampus.ca/ajax/exercises/nodes2.htm

    Basically, I am trying to not only set the option name, but the option value as well when I populate the first selectbox.

    Anyhelp would be great

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ideally, it would just grab the counter value from the first selectbox, and I could use it for the second selectbox.
    What is "the counter" value?

  3. #3
    SitePoint Zealot dawgbone's Avatar
    Join Date
    Dec 2003
    Location
    Brampton
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud View Post
    What is "the counter" value?
    departureIndex

    which is the number used to tell the displayDeparture function where in the departureDisplay selectbox to put each returned item.

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the first select:
    Code:
    <form>
    
    <select size= "1" id= "departureList" onchange = "getDestinations()">
            <option>Select a Departure City</option>
    </select>
    You said:
    Ideally, it would just grab the counter value from the first selectbox, and I could use it for the second selectbox.
    What are you refering to?

  5. #5
    SitePoint Zealot dawgbone's Avatar
    Join Date
    Dec 2003
    Location
    Brampton
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apparantly I included too much detail...

    Two select boxes.

    Both are filled with data from an XML source.

    The xml source works (so that isn't an issue).

    The data for the 2nd checkbox is determined by whatever the user selects from the first checkbox.

    Now, in the code I mentioned above, the first select eventually gets populated by this line of code:

    PHP Code:
    selectDeparture.options[departureIndex] = new Option(departureNode.firstChild.data); 
    That works fine... there are no issues there. The departureIndex just refers to which location in the selectbox array (named departureList) I wish the data to go into (remember this part for below).

    the XML data is structured in the following way:

    http://www.offcampus.ca/ajax/exercises/ajax.php

    Now, in the second select menu I use the following bit of code to specify which xml node I wish to use:

    PHP Code:
    gatewayNode gatewaysNode.childNodes[2]; 
    If you look at the XML document, and step through it, this is the 3rd <GATEWAY> tag, which contains the code YYC and the Name Calgary (with a bunch of other entries under Destinations).

    Now, I've hardcoded that value of 2 in there. I want to make it so that it does this instead:

    PHP Code:
    gatewayNode gatewaysNode.childNodes[departureIndex]; 
    I want to make it so that it uses the departureIndex variable from the function that populated the 1st selectbox to populate the 2nd one, or even just get the array value for the checkbox selection.

    For example. If the user selects Calgary, that is the equivilant to departureList[3] (as departureList[0] is select a departure city, departureList[1] is Abbotsford, etc...). I need to get that [3] to go over into the function that I am calling that populates the new checkbox.

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The data for the 2nd checkbox is determined by whatever the user selects from the first checkbox.
    What checkbox?

    I suggest you try to get your script to work without any xhr requests. Create a page with two selects or checkboxes or whatever you want. Put some data in an array if required. Then try to write a script to do what you want. If you have problems, post the code with the expected results and the actual results.

  7. #7
    SitePoint Zealot dawgbone's Avatar
    Join Date
    Dec 2003
    Location
    Brampton
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud View Post
    What checkbox?

    I suggest you try to get your script to work without any xhr requests. Create two selects or checkboxes or whatever you want. Write a script to do what you want. Post the code and the problems you are having.
    Selectbox... sorry.

    Nevermind, I figured it out.
    Last edited by dawgbone; Jan 30, 2007 at 15:39.


Bookmarks

Posting Permissions

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