[AJAX] IE Problem

Seachmall · 05-02-2008 12:01am #1

I'm using AJAX to retrieve a list of <option>s that I place inside of <select> tags. It works fine in Ff but not in IE. This is the code

if (xmlHttp.readyState==4){ 
  alert(document.getElementById("example").innerHTML);
	document.getElementById("example").innerHTML=xmlHttp.responseText;
}else if(xmlHttp.readyState==1||xmlHttp.readyState==4||xmlHttp.readyState==3){
	document.getElementById("example").innerHTML="<option value='null'>Loading...</option>";
}

When the alert pops up in Ff it displays <option value='null'>Loading...</option> but in IE is shows Loading...</option> removing the opening <option> tag and meaning the tag isn't displayed. Is there any way around this?

seamus · 05-02-2008 9:12am

I'm not sure....

Maybe try switching your quote marks?

That is, use
document.getElementById('example').innerHTML='<option value="null">Loading...</option>';

Total longshot, but I've found IE to be finnicky about such things.

ron_darrell · 05-02-2008 11:39am

Agree with Seamus - IE seems to prefer single quotes for strings. Use \' for quotes inside these quotes rather than double quote and it should work ok (I'm assuming example is the id of the <select> tag holding the options). Technically since you're using an else if there should be a closing else as well. It might be a better idea to use a switch for what you're doing here:

switch(xmlHttp.readyState)
{
     case 4:
             alert(document.getElementById("example").innerHTML);
             document.getElementById("example").innerHTML = xmlHttp.responseText;
     break;
     case 1:
             document.getElementById("example").innerHTML = '<option value=\'null\'>Loading...</option>';     
     break;
     case 3:
             document.getElementById("example").innerHTML = '<option value=\'null\'>Loading...</option>';
     break;
}

I must also point out that you have readyState == 4 in both cases of your code (the if and the else if). That's generally not going to work out for you. I would suggest moving the ||xmlHttp.readyState==4 from your else if.

Hope that helps
-RD

dzy · 05-02-2008 12:06pm

innerHtml is not standard and if you use it you'll have to battle against these quirks. I think it is better to send your data from the server in JSON format and use DOM methods to build your HTML. Although this is quite a bit slower, at least it is reliable.

Eoin · 05-02-2008 12:17pm

I generally only use innerHTML for tags that display text. For form elements, try creating an option element and adding it to the select element.

Something like this (off the top of my head, so will probably need playing around with):

var tmpOption = new Option("Loading...", "");
document.getElementById("YourSelectBox").options[0] = tmpOption;

dzy · 05-02-2008 12:31pm

Here's some code showing how to use DOM to do this.

<html>
<head>
<script type="text/javascript">

    function setChildLoading()
    {
        var childSelect = document.getElementById("childSelect");

        while (childSelect.firstChild)
        {
            childSelect.removeChild(childSelect.firstChild);
        }

        var loadingOption = document.createElement("option");
        var loadingText = document.createTextNode("Loading...");

        loadingOption.appendChild(loadingText);
        childSelect.appendChild(loadingOption);
    }

</script>
</head>
<body>
<form>
    <select id="parentSelect" onChange="setChildLoading()">
        <option value="0">Select something</option>
        <option value="1">Something</option>
    </select>
    <select id="childSelect">
    </select>
</form>
</body>
</html>

Seachmall · 06-02-2008 7:09pm

Thanks for the replies guys. I believe that the problem is indeed IE not being able to use innerHTML on form elements however I'm reluctant to go down the road of creating <option>s inside of the <select> due to the large amount of <option>s that the PHP produces (which the AJAX inputs into the <select>). I've decided to go a different route and remove the AJAX altogether and use basic JS to get the effect I require.

I thought I'd conclude the thread incase anyone came by it looking for a solution to the same problem.

Thanks again for the help

.

ron_darrell · 07-02-2008 11:38am

You give up too easily my friend. AJAX and IE are more than capable of working together and updating form elements. You just need to look at it in a different way to get the results you want sometimes. Instead of replacing the option values of the select item (which btw is more than possible using AJAX and IE - I can't understand why you're running into difficulties) why not replace the entire select item??

Example:
So instead of:

<select id="myselect"><option value="1" /><option value="2" /></select>

Have :

<span id="myselectspan">
<select id="myselect"><option value="1" /><option value="2" /></select>
</span>

Now have your AJAX write to document.getElementById('myselectspan').innerHTML instead of document.getElementById('myselect').innerHTML (obviously now including the select tag in the return string)

Regards,
-RD

louie · 07-02-2008 12:17pm

As ron_darrell said - create a span id and use that to generate the new select menu inside it.

Seachmall · 07-02-2008 9:11pm

ron_darrell wrote: »
You give up too easily my friend. AJAX and IE are more than capable of working together and updating form elements. You just need to look at it in a different way to get the results you want sometimes. Instead of replacing the option values of the select item (which btw is more than possible using AJAX and IE - I can't understand why you're running into difficulties) why not replace the entire select item??

Example:
So instead of:
<select id="myselect"><option value="1" /><option value="2" /></select>
Have :
<span id="myselectspan">
<select id="myselect"><option value="1" /><option value="2" /></select>
</span>
Now have your AJAX write to document.getElementById('myselectspan').innerHTML instead of document.getElementById('myselect').innerHTML (obviously now including the select tag in the return string)

Regards,
-RD

That did cross my mind however after thinking about it I realised that the new way made more sense for what I needed to do (the ajax was probably overkill

) however I probably will be heading down this route again in the near future and I'll be sure to give this way a go. Thanks again

.

[AJAX] IE Problem

Comments