Results 1 to 3 of 3

Thread: Drop-down population not working in Mozilla

  1. #1
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Drop-down population not working in Mozilla

    I have a form where I need to populate multiple drop-down based on the first drop-down selection. For the same I am using AJAX. My application is working fine in IE but not in Mozilla.
    I tried to debug it and found that the XMLHttpRequest is being created properly but the issue is in populating the dropdown.

    I am using the following javascript
    -----------------------------------------------------------------------
    var XmlHttpObj;
    function CreateXmlHttpObj()
    {
    try
    {
    XmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
    try
    {
    XmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(oc)
    {
    XmlHttpObj = null;
    }
    }
    if(!XmlHttpObj && typeof XMLHttpRequest != "undefined")
    {
    XmlHttpObj = new XMLHttpRequest();
    }

    }
    function ExamListOnChange()
    {
    var companyList = document.getElementById("Company_id");
    // get selected company from dropdown list
    var selectedCompany = companyList.options[companyList.selectedIndex].value;

    var requestUrl;
    requestUrl = "/PopulateExamList" + "?company_id=" + encodeURIComponent(selectedCompany);

    CreateXmlHttpObj();
    // verify XmlHttpObj variable was successfully initialized
    if(XmlHttpObj)
    {
    // assign the StateChangeHandler function ( defined below in this file)
    // to be called when the state of the XmlHttpObj changes
    // receiving data back from the server is one such change
    XmlHttpObj.onreadystatechange = StateChangeHandler;

    // define the iteraction with the server -- true for as asynchronous.
    XmlHttpObj.open("GET", requestUrl, true);

    // send request to server, null arg when using "GET"
    XmlHttpObj.send(null);
    }

    }

    function StateChangeHandler()
    {
    // state ==4 indicates receiving response data from server is completed
    if(XmlHttpObj.readyState == 4)
    {
    // To make sure valid response is received from the server, 200 means response received is OK
    if(XmlHttpObj.status == 200)
    {
    PopulateExamList(XmlHttpObj.responseXML.documentElement);
    }
    else
    {
    alert("problem retrieving data from the server, status code: " + XmlHttpObj.status);
    }
    }
    }

    function PopulateExamList(companyNode)
    {

    var examList = document.getElementById("Exam");
    // clear the exam list
    for (var count = examList.options.length-1; count >-1; count--)
    {
    examList.options[count] = null;
    }

    var versionList = document.getElementById("Version");
    // clear the version list
    for (var count = versionList.options.length-1; count >-1; count--)
    {
    versionList.options[count] = null;
    }

    var classList = document.getElementById("Class_id");
    // clear the class list
    for (var count = classList.options.length-1; count >-1; count--)
    {
    classList.options[count] = null;
    }

    var examNodes = companyNode.getElementsByTagName('exam');
    var idValue;
    var textValue;
    var optionItem;

    for (var count = 0; count < examNodes.length; count++)
    {
    textValue = GetInnerText(examNodes[count]);
    idValue = examNodes[count].getAttribute("id");

    optionItem = new Option( textValue, idValue, false, false);

    examList.options[count] = optionItem;
    }

    var versionNodes = companyNode.getElementsByTagName('version');
    var idValue;
    var textValue;
    var optionItem;
    for (var count = 0; count < versionNodes.length; count++)
    {
    textValue = GetInnerText(versionNodes[count]);
    idValue = versionNodes[count].getAttribute("id");

    optionItem = new Option( textValue, idValue, false, false);

    versionList.options[count] = optionItem;
    }

    var classNodes = companyNode.getElementsByTagName('class');
    var idValue;
    var textValue;
    var optionItem;
    for (var count = 0; count < classNodes.length; count++)
    {
    textValue = GetInnerText(classNodes[count]);
    idValue = classNodes[count].getAttribute("id");

    optionItem = new Option( textValue, idValue, false, false);

    classList.options[count] = optionItem;
    }


    }

    --------------------------------------------------------------------------

    Depending on the company id the Exam,Version and Class list is populated.
    The XmlHttpObj.responseXML is :

    <?xml version="1.0" encoding="UTF-8" ?>
    <company id='Boeing'>
    <exam id='1'>Exam 1</exam>
    <exam id='2'>Exam 2</exam>
    <version id='A'>Version A</version>
    <version id='B'>Version B</version>
    <class id='001'>001</class>
    <class id='009'>009</class>
    <class id='025'>025</class>
    </company>

    Please help, its urgent.
    Thanxs in advance.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You should have a look at this thread:

    http://www.dynamicdrive.com/forums/s...ad.php?t=15849
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks

    Thanks John,
    My code is working fine now. Actually there was no problem in Javascript. The problem was with JSP page,
    I had not used "id" attribute over here
    <select name="User_id">

    It worked only by making the following modification
    <select name="User_id" id="User_id" >

    Anyway I found this error when I was trying to implement your code.
    So thanks a lot.

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
  •