Ajax browser and drop down menu problem


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 2 of 2

Thread: Ajax browser and drop down menu problem

  1. #1
    Join Date
    Nov 2006
    Posts
    4

    Ajax browser and drop down menu problem

    Hello,
    I have a form that has 2 drop down menus. when you select an item from the first drop down it populates the the second drop down depending on what you selected. It works at first... but if you try to select an option that you had is higher on the list it will not populate... for example... say my 2 options are electronics and medical.. if I select medical the second drop down menu populates... if I decide to change to electronics the second drop down does not repopulate to the choices for electronics. does any one know what I can do to fix that?

    my second problem is that my Ajax will not work in Firefox.

    here is my code:
    PHP Code:
    <script language="javascript" type="text/javascript">
    var 
    XMLHttpRequestObject false;
    try{
        
    XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");
        } catch(
    exception1) {
            try{
                
    XMLHttpRequestObject = new ActiveXObject("Microsoft");
                } catch(
    exception2) {
                    
    XMLHttpRequestObject false;
                    }
            } 

    if(
    XMLHttpRequestObject && window.XMLHttpRequest) {
        
    XMLHttpRequestObject = new XMLHttpRequest();
        }
        
    function 
    getValue(cat,id) {
        
    getSub(cat,id);
        } 
        
    function 
    getSub(cat,id) {
        if(
    XMLHttpRequestObject) {
            if(
    cat == "Electronics") {
                
    XMLHttpRequestObject.open("GET","electronics.xml",true);
                }
            if(
    cat == "Medical") {
                
    XMLHttpRequestObject.open("GET","medical.xml",true);
                }
            
    alert(cat);
            var 
    subId id;
            
            
    XMLHttpRequestObject.onreadystatechange = function() {
                if(
    XMLHttpRequestObject.readyState == && XMLHttpRequestObject.status == 200) {
                    var 
    xmlDocument XMLHttpRequestObject.responseXML;
                    
                    var 
    subCategory xmlDocument.getElementsByTagName("subs");
                    
    listSubs(subCategory,subId);
                    }
                }
            
    XMLHttpRequestObject.send(null);
            }
        }
        
    function 
    listSubs(subCategory,subId) {
        var 
    loopIndex;
        
    /*if(subId == "mainCat1") {
            var subCat = "subCat1";
            }*/
        
    var selectControl document.getElementById("subCat1");
        
        for(
    loopIndex=0;loopIndex<subCategory.length;loopIndex++) {
            
    selectControl.options[loopIndex] = new
                
    Option(subCategory[loopIndex].firstChild.data);
            }
        }
    </script> 
    I hope I explained things well enough, thanks for your help.

  2. #2
    Join Date
    Nov 2006
    Posts
    4
    I figured it out... I ended up writing a function that would clear the list every time a new selection was made..

    However I am still having problems getting the Ajax to work in Firefox..

    here is my new code

    PHP Code:
    <script language="javascript" type="text/javascript">
    var 
    XMLHttpRequestObject false;
    try{
        
    XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");
        } catch(
    exception1) {
            try{
                
    XMLHttpRequestObject = new ActiveXObject("Microsoft");
                } catch(
    exception2) {
                    
    XMLHttpRequestObject false;
                    }
            } 

    if(
    XMLHttpRequestObject && window.XMLHttpRequest) {
        
    XMLHttpRequestObject = new XMLHttpRequest();
        }
        
    function 
    getValue(cat,id) {
        
    clearList(id);
        
    getSub(cat,id);
        } 
        
    function 
    getSub(cat,id) {
        if(
    XMLHttpRequestObject) {
            if(
    cat == "Electronics") {
                
    XMLHttpRequestObject.open("GET","electronics.xml",true);
                }
            if(
    cat == "Medical") {
                
    XMLHttpRequestObject.open("GET","medical.xml",true);
                }
            if(
    cat == "Industrial") {
                
    XMLHttpRequestObject.open("GET","industrial.xml",true);
                }
            if(
    cat == "Nanotechnology") {
                
    XMLHttpRequestObject.open("GET","nano.xml",true);
                }
            
    alert(cat);
            var 
    subId id;
            
            
    XMLHttpRequestObject.onreadystatechange = function() {
                if(
    XMLHttpRequestObject.readyState == && XMLHttpRequestObject.status == 200) {
                    var 
    xmlDocument XMLHttpRequestObject.responseXML;
                    
                    var 
    subCategory xmlDocument.getElementsByTagName("subs");
                    
    listSubs(subCategory,subId);
                    }
                }
            
    XMLHttpRequestObject.send(null);
            }
        }
        
    function 
    listSubs(subCategory,subId) {
        var 
    loopIndex;
        var 
    subCat;
        if(
    subId == "mainCat1") {
            
    subCat "subCat1";
            }
        if(
    subId == "mainCat2") {
            
    subCat "subCat2";
            }
        var 
    selectControl document.getElementById(subCat);
        
        for(
    loopIndex=0;loopIndex<subCategory.length;loopIndex++) {
            
    selectControl.options[loopIndex] = new
                
    Option(subCategory[loopIndex].firstChild.data);
            }
        }
        
    function 
    clearList(id) {
        var 
    clearCat;
        if(
    id == "mainCat1") {
            
    clearCat "subCat1";
            }
        if(
    id == "mainCat2") {
            
    clearCat "subCat2";
            }
        var 
    len document.getElementById(clearCat).options.length
          
    for(0leni++) {
            
    document.getElementById(clearCat).options[0] = null;
            }
        }
    </script> 
    Please let me know about the Firefox browser thanks for your help.

Similar Threads

  1. Divs and drop down menus
    By Nick in forum Web
    Replies: 2
    Last Post: 07-25-2001, 10:57 AM
  2. ANN: vbClarity Visual Menu Editor 1.0
    By Paul R. Wilde \(vbClarity\) in forum vb.announcements
    Replies: 0
    Last Post: 12-01-2000, 11:25 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center