SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Brisbane, Australia
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax Select Issue - IE

    I have some ajax working in firefox but it doesn't work in IE. The code works of a <SELECT> dropdown which triggers the javascript and gets the data using PHP from MySQL. The data is returned as text or in <option> tags (see below).

    The main page is then updating a second <SELECT> dropdown with the <OPTION> tags sent by the ID of the <SELECT> tag.

    I discovered it will work in firefox but not IE. If I create a <DIV> with the same ID as the <SELECT> tag then IE will disply the results but not within a <SELECT> tag.

    I suspect my issue lies within this line:

    document.getElementById("dropdown").innerHTML=xmlHttp.responseText;

    Basially IE will not activate this if it is a <SELECT> tag while it will with other tags.

    Anyone able to help me out?

    Thanks

    My Code is as follows...
    JAVASCRIPT
    Code javascript:
    			var xmlHttp
     
    			function showResults(str)
    			{ 
    			xmlHttp=GetXmlHttpObject();
    			if (xmlHttp==null)
    			  {
    			  alert ("Your browser does not support AJAX!");
    			  return;
    			  } 
    			var url="ajax-list-skills.php";
    			url=url+"?age_id="+str;
    			url=url+"&sid="+Math.random();
    			xmlHttp.onreadystatechange=stateChanged;
    			xmlHttp.open("GET",url,true);
    			xmlHttp.send(null);
    			}
     
    			function stateChanged() 
    			{ 
    			if (xmlHttp.readyState==4)
    			{ 
    				document.getElementById("dropdown").innerHTML=xmlHttp.responseText;
     
    			}
    			}
     
    			function GetXmlHttpObject()
    			{
    			var xmlHttp=null;
    			try
    			  {
    			  // Firefox, Opera 8.0+, Safari
    			  xmlHttp=new XMLHttpRequest();
    			  }
    			catch (e)
    			  {
    			  // Internet Explorer
    			  try
    				{
    				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    				}
    			  catch (e)
    				{
    				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    				}
    			  }
    			return xmlHttp;
    			}

    MAIN PAGE (SNIPPET)
    Code:
            <label for="age_id"><em>*</em> Age Group:</label>
            <select name="age_id" style="width: 200px;" onChange="showResults(this.value)">
            	<option value="">Please select to continue</option>
    		<?php foreach ($ages as $age) { ?>
            		<option value="<?php echo $age->age_id; ?>"><?php echo $age->age_name; ?></option>
            <?php } ?>
            </select><br />
    
    
            <label for="level_skill_a"><em>*</em> Skill A:</label>
            <select name="level_skill_a" id="dropdown" style="width: 200px;">
            </select>
    PHP
    PHP Code:
    // SELECT SKILLS PER AGE GROUP
    // ------------------------------------------------------------------>
    if(isset($_REQUEST['age_id']))
    {
        
    $age_id $_REQUEST['age_id'];
        
    $skills $db->get_results("SELECT skill_id, skill_name FROM us_skills WHERE skill_age_id = $age_id ORDER BY skill_order");
    }

    // IF DB RESULTS FOUND
    // ------------------------------------------------------------------>
    if ($skills)
    {
        foreach(
    $skills as $skill)
        {
            echo 
    "<option value=\""$skill->skill_id ."\">"$skill->skill_name ."</option>\r\n";
        }
    }
    else
    {
        echo 
    "<option value=''>NO RESULTS FOUND</option>";

    I have knocked up a quick online demo so you can see the differences, check in firefox then check in IE. (20 months to 3 years has data)

    http://uswim.leeroxdigital.com/siteadmin/issues/
    Last edited by leerox; May 23, 2008 at 14:48. Reason: Adding In Demo Link

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object
    http://support.microsoft.com/kb/276228

    RESOLUTION
    If you must use innerHTML, a workaround is to use a Div object to wrap the SELECT element and then set the innerHTML property for the Div object.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Brisbane, Australia
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. I'm only new to Ajax/JavaScript in general so I'm not sure but I was wondering if there would be an alternative to using innerHTML for my situation?

    Thankyou

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Yes, you can receive the data as a JSON object, then use the information from that object to create a new select element (with option data) and then replace the old select element with the new one.

    See http://www.quirksmode.org/blog/archi...on.html#link10
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    Brisbane, Australia
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help, I will do some research. Cheers.


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
  •