Ajax Problem - Not working in IE, works perfect in Firefox

[Zanzertuchi]

Howdy Everyone,

I've been banging my head against this for a bit now and have been reading all kinds of things - but, everything I try has failed. So, I thought I'd ask.

I've just begun working with Javascript/Ajax .. in the last day to try and accomplish a task but, I can't seem to get this code to work in IE it works fine in Firefox.

Perhaps someone can enlighten me - Basically, this is calling back from a php file that updates from a database to choose dropdowns/checkbox based on the users choices.

Any help is greatly appreciated.

function getSex(theSex, myParent){
        var ajaxRequest;
        try{
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    alert("Your browser broke!");
                    return false;
                }
            }
        }
        ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){
                responcer = ajaxRequest.responseText.split(",");
                size = responcer.length - 1;
                myParent.age.innerHTML = "";
                for(i = 0; i < size;i++)
            if(responcer[i] != "")
              myParent.age.innerHTML += '<option value="' + responcer[i] + '">' + responcer[i] + '</option>';
            }
        }
        ajaxRequest.open("GET", "test.php?theSex=" + theSex, true);
        ajaxRequest.send(null); 
    }
  
  
    function getBelt(theId, myParent){
        var ajaxRequest;
        try{
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    alert("Your browser broke!");
                    return false;
                }
            }
        }
        ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){
                responcer = ajaxRequest.responseText.split(",");
                size = responcer.length - 1;
                myParent.second.innerHTML = "";
                for(i = 0; i < size;i++)
            if(responcer[i] != "")
              myParent.second.innerHTML += '<option value="' + responcer[i] + '">' + responcer[i] + '</option>';
            }
        }
        ajaxRequest.open("GET", "test.php?id=" + theId, true);
        ajaxRequest.send(null); 
    }
	
	
	
	
	 function getReg(theBelt, myParent){
        var ajaxRequest;
        try{
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    alert("Your browser broke!");
                    return false;
                }
            }
        }
        ajaxRequest.onreadystatechange = function(){ 
            if(ajaxRequest.readyState == 4){
                responcer = ajaxRequest.responseText.split(",");
                size = responcer.length - 1;
                document.getElementById("third").innerHTML = "";
                for(i = 0; i < size;i++)
				
            if(responcer[i] != "")
			
              document.getElementById("third").innerHTML += '<input type="checkbox" name ="third[]" value="' + responcer[i] + '">' + responcer[i] + '</input><br />';
			}
        }
        ajaxRequest.open("GET", "test.php?theBelt=" + theBelt, true);
        ajaxRequest.send(null); 
    }

-Steven

[Lizapotter]

It's not the problem of coding, tell me which version of IE you are currently using

[Zanzertuchi]

It's not the problem of coding, tell me which version of IE you are currently using

Howdy,

Thanks for the reply :)

Most importantly I've been trying to get it working in IE7, but I've also tried in IE8 - With the same results.

[xyzweb]

The issue is that IE does NOT support using the .innerHTML property to *Set* the content of a Select List. (see bug report below)

http://webbugtrack.blogspot.com/2007/08/bug-274-dom-methods-on-select-lists.html

This is broken in IE6, 7 and 8 (and has been noted by Microsoft as a "wont fix" bug)

For IE you'll need to use a workaround setting either the outerHTML, or wrap the .innerHTML in a bogus element like a DIV first. (yeah very silly, but it works)

[Zanzertuchi]

Thank you for the response,

That is indeed very silly; it'd be nice if everything worked consistently wouldn't it!

Either way, thank you for helping me realize exactly what the problem was, much appreciated.

[toxinhead]

Thanks this thread helped me heaps!!

[Troy III]

the guy at webbugtrack can't tell a sheep from a goat.
His title says: "bug 274 - DOM Methods on Select Lists don't work in IE"
First: The innerHTML is not a DOM method!
Second: Options are not HTML Elements they are Controls.

[xyzweb]

well, it's not a method directly but it is a getter and setter (which are methods)
and yes, options most certainly are HTML Elements... if they were not, then calling document.getElementsByTagName('option'); would fail... which it doesn't.

regardless Microsoft fixed this bug, and the one setting the innerHTML of a table... in IE10 (still yet to be released!)

[Troy III]

no no no
I never said it's not a 'method' , I said not a DOM Method. And it's not.
Options are not HTML Elements - they are Controls.
It doesn't matter if they are invoked by markup or if this markup can be read from the mirroring DOM.

Further, -no, It's not a bugg.
And no, its not fixing it. -It's complying to a prevalent wrong concept on the matter.

[blocblue]

That is indeed very silly; it'd be nice if everything worked consistently wouldn't it!

If you want consistency, you could use a JavaScript framework. The code bases are usually very small, and they provide tried and tested functions for common tasks, including AJAX requests.

[xyzweb]

yes yes yes

Controls are typically part of thick client apps/frameworks and since they are essentially self-contained, they can do whatever they want.

However on the Web, in HTML... plain text markup served up from a server to a web browser client... everything is an Element.

It can be a text element, a comment element, or a node element (e.g. a tag).

A "div" is not a control, nor is a "span", an "li" or a "blockquote" or a "tr"... etc.

.innerHTML is a getter/setter method that should work on all DOM elements - so not technically a DOM method from the ECMAScript Appendix E DOM Methods... but it is essentially a "Method that acts on DOM elements"

As for the bugs in IE... these are well documented, have been around for like 15 years now, filed in IE's bug tracking for IE7, IE8, IE9, and IE10... confirmed by former IE Architect Chris Wilson and IE Networking Architect Eric Lawrence, and IE Program Manager Dean M{can't recall his full name}. More importantly the guy who invented innerHTML admited it was a bug.

Anyway, in IE10 both the bug with setting innerHTML on Tables and on Select elements has been fixed!! Wahooo Yippeee!

Long story short, call .innerHTML a property or method... a DOM element or Control... it doesn't matter... the important thing now is that it works properly on the HTMLTableElement and HTMLSelectElement in IE10 just like it has always worked in Firefox, Chrome, Safari, Opera, Camino, Konqueror, etc.

As soon as IE6, IE7, IE8, and IE9 have been deprecated I think there will be a huge party! :-P

[Tyler W. Cox]

This is a bit of a hack but it's tiny and works in both FF and IE as a workaround to IE's inability to change innerHTML on select elements.

function swapInnerHTML(objID,newHTML) {
  var el=document.getElementById(objID);
  el.outerHTML=el.outerHTML.replace(el.innerHTML+'</select>',newHTML+'</select>');
}