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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    innerHTML to populate <select> no go in IE

    I am using getElementbyID and InnerHTML to populate the options in a select tag. I am using SAJAX (PHP and AJAX) and I've heard it's a bad idea. But it's too late to completely change my code. It works perfectly in Firefox but in IE the selectbox aren't populated.

    Could someone help me out?

    here is the code I believe could cause the problem:

    Code:
    function refreshcat(displayString){
       clearlevels(document.getElementById("change_id").value);
    	changingID = 'cat' + document.getElementById("change_id").value;
    	if (document.getElementById)
    	{
    	    var replace=document.getElementById(changingID);
    	    if (replace)
    	    {
    	        if (replace.childNodes[0])
    	        {
    	            replace.childNodes[0].nodeValue=displayString;
    	        }
    	        else if (replace.value)
    	        {
    	            replace.value=displayString;
    	        }
    	        else //if (replace.innerHTML)
    	        {
    	            replace.innerHTML=displayString;
    	        }       
    	    }
    	}
    
    }

    and here is the link to the page:

    http://www.equipementservicesjlr.com...egories_fr.php


    any hints as to why it doesnt work in IE but does in firefox would be greatly appreciated!

    thanks in advance

    Martin

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    what does that comment stand for?

    else //if (replace.innerHTML)

    Try remove it.

    .....anyway your code looks buzzling for me... why do you need to use as condition
    else if (replace.value)
    else if (replace.innerHTML)

    ?

    can't you make your code in a simple crossbrowser DOM way?
    Last edited by Kor; 07-21-2006 at 12:50 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    It sounds to me like he is being sent the options as a string. Which makes it tuff to use the dom to append them to the select. In which case it takes some fancy string handling to get the needed data and append it to newly created options.

    It would be nice if there was a cross browser way to "load" a xml or xhtml string into a dom traversable variable or something. If there is someone please share this with me as it would make life a lot easier for myself as well.

    What I do to get around this is put the string into a hidden div in the document using innerHTML and then traverse through it to recreate it.

    Like So:

    Code:
    <html>
    	<head>
    		<script type="text/javascript">
    			function changeOptions()
    			{
    				var str=""+
    				"<option>New Value 1</option>" +
    				"<option>New Value 2</option>" +
    				"<option>New Value 3</option>" +
    				"<option>New Value 4</option>";
    				
    				var temp_sel='<select id="temp_sel">';
    				var temp_end='</select>';
    				var obj1=document.getElementById('temp');
    				obj1.innerHTML=temp_sel+str+temp_end;
    				
    				var obj2=document.getElementById('temp_sel');
    				var len=obj2.length;
    				
    				var obj3=document.getElementById('sel1');
    				obj3.length=0;
    				for(var i=0;i<len;i++)
    				{
    					var txt=obj2.options[i].text;
    					var val=obj2.options[i].value;
    					obj3.options[obj3.length]=new Option(txt,val);
    				}
    				obj1.innerHTML="";
    			}
    		</script>
    		<style type="text/css">
    			#temp
    			{
    				display:none;
    			}	
    		</style>
    	</head>
    	<body>
    		<div id="temp">
    		</div>
    		<select id="sel1">
    			<option>Old Value 1</option>
    			<option>Old Value 2</option>
    			<option>Old Value 3</option>
    			<option>Old Value 4</option>
    		</select>
    		<input type="button" onclick="changeOptions();" value="Test" />
    	</body>
    </html>
    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Trying to set the content of a select the wrong way will never work. The options are part of the select and so can't be separately referenced via innerHTML, you reference them using the options array instead.

    So instead of trying to use

    obj1.innerHTML=temp_sel+str+temp_end;

    you would instead use

    obj1.options[obj1.options.length] = new Option(strtxt,strval);

    to add each option separately after splitting the required content into separate text and values for each option
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Isn't that what I did?

    Code:
    obj1.innerHTML=temp_sel+str+temp_end;
    I'm playing psychic forum guy. The reason for that line is that I am assuming he is recieving a string of option values from the server, instead of an xml document of option values. So in order to properly parse out the text and value options you'd need some means of making the string traversable. Or some fancy string handling to to strip out the values and text from the string. I haven't had much luck loading a string value into the xml parser for either IE or Moz so I just insert the string into a hidden div and traverse it from there. Then clear it out.

    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I would have not used innerHTML at all. I would have used createElement() and removeChild() methods all over... The moment u mix DOM methods with innerHTML non-standard method, problems will occure for sure...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I used felgall's suggestion

    obj1.options[obj1.options.length] = new Option(strtxt,strval);

    had to change my code a bit, but now it works perfectly.

    thanks a bunch for all suggestions

  • #8
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by Kor
    I would have not used innerHTML at all. I would have used createElement() and removeChild() methods all over... The moment u mix DOM methods with innerHTML non-standard method, problems will occure for sure...
    I totally agree. I wouldn't do what I suggested if I had any control over the format of the data being sent to me. If I just have a string though, and not xml, how would you use removeChild to get the data you need for the values and text for the option in the example above?

    Basscyst
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

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