AJAX on dropdown option in Internet Explorer not working

AJAX in the dropdown does work in Firefox, not in IE

[dbzfyam]

Does anyone know if it's possible to add Javascript/AJAX to a select option in Internet Explorer? The code below works fine in Firefox, but it doesn't do anything in IE (it should replace a div containing a new dropdown box):

<select name="order">
<option selected disabled style="color:#cccccc">Categorie</option>
<option onmouseup="javascript:replace2('prod', 'Brood')">Brood</option>
<option onmouseup="javascript:replace2('prod', 'Soepen')">Soepen</option>
<option onmouseup="javascript:replace2('prod', 'Drinken')">Drinken</option>
</select>

The AJAX code:

function replace2(where, what) {
toggleLayer('commentForm');
 http.open("GET", "prodDropdowns.php?cat=" + what, true);
 http.onreadystatechange=function() {
  if(http.readyState == 4) {
   document.getElementById(where).innerHTML = http.responseText;
  }
 }
 http.send(null);
toggleLayer('commentForm');
}

Thanks in advance,
Stefan

[penders]

I would have thought you should be using the onchange event of the SELECT element instead. Is your onmouseup event accessible by the keyboard in FF?

[dbzfyam]

It isn't accessible by the keyboard in FF. Only the mouse. I just changed the onmouseup to onchange, but it doesn't work.

[adb64]

I've also used Javascript/AJAX on a dropdownlist and it works in both IE and FF. I have the following code:

<select onChange="replace2('prod',this.options[this.selectedIndex].value); return false;">
<option value='xx' selected disabled style="color:#cccccc">Categorie</option>
<option value='soep'>Soep</option>
<option value='broodjes'>Broodjes</option>
</select>

function replace2(Where,What) {
 if (What!= 'xx') {
 whatever you want to do here
 }
}

I use a value of 'xx' for disabled items in the list because I found out that IE6 doesn't understand 'disabled' and check on this value in the replace2 function.

[dbzfyam]

Thanks for the fast reply. Just tried to implement your code, but I can't seem to get it to work. Maybe I'm doing something wrong with my AJAX code (maybe the wrong XML Objects?):

Complete Javascript/AJAX code:

image1 = new Image();
image1.src = "files/loader.gif";
if(window.XMLHttpRequest){
http = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
http=new ActiveXObject("Msxml2.XMLHTTP");
 if (! request){
  http=new ActiveXObject("Microsoft.XMLHTTP");
 }
 }
function replace2(where,what) {
if (What!= 'xx') {
alert ('Kies a.u.b. een categorie');
}
else {
toggleLayer('commentForm');
 http.open("GET", "catDropdowns.php?kind=" + what, true);
 http.onreadystatechange=function() {
 if(http.readyState == 4) {
 document.getElementById(where).innerHTML = http.responseText;
 }
 }
 http.send(null);
 toggleLayer('commentForm');
}
}
function toggleLayer(whichLayer) {
var elem, vis;
if( document.getElementById )
elem = document.getElementById( whichLayer );
else if( document.all )
elem = document.all[whichLayer];
else if( document.layers )
elem = document.layers[whichLayer];
 vis = elem.style;
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''¦¦vis.display=='block')?'none':'block';
}

PHP Code (content to replace the div):

if (!isset($_GET['kind']) ¦¦ $_GET['kind'] == "lunch") {
PRINT <<<HERE
<select onChange="replace2('prod',this.options[this.selectedIndex].value); return false;" name="order"> 
<option value='xx' selected disabled style="color:#cccccc">Categorie</option> 
<option value='Brood'>Brood</option> 
<option value='Soepen'>Soepen</option> 
<option value='Drinken'>Drinken</option>
</select>
HERE;
}

[adb64]

Hi dbzfyam,

What exactly isn't working?
If you put only an alert in the replace2 function to display the arguments, are they correct?
If that works, insert the XMLHttpRequest in the function and check whether it calls the catDropdowns.php script on your server, don't use the togglelayer stuff yet.
If that works, call that same script with the same arguments just right from your browser and check whether it returns what you expect.
If that works, add the togglelayer stuff again and check whether that works.
By then you should have the same as you have now, so on the way there something should fail.

Regards,

Arjan

[dbzfyam]

I accidently copied the wrong code (see code below). I tried adding the if's to the function (also tried without the if/else) and removed the togglelayer, but it doesn't replace the div with the new dropdown box (from the file I call).

According to Firebug (firefox), the script does call the file, but never receives anything (on the "Response" tab, it keeps saying "Loading...").

function replace2(where,what) {
if (what!= 'xx') {
if(window.XMLHttpRequest){
http = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
http=new ActiveXObject("Msxml2.XMLHTTP");
  if (! request){
   http=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
 http.open("GET", "prodDropdowns.php?kind=" + what, true);
 http.onreadystatechange=function() {
 if(http.readyState == 4) {
  document.getElementById(where).innerHTML = http.responseText;
 }
 }
 http.send(null);
}
}

[adb64]

If you directly type in the addressbar of your browser the following URL: http://www.example.com/prodDropdowns.php?kind=Soepen
What response do you get?

[adb64]

Oh, and I noted the following in your code:

... 
else if (window.ActiveXObject) { 
http=new ActiveXObject("Msxml2.XMLHTTP"); 
if (! request){ <== shouldn't this be !http 
http=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
... 

[dbzfyam]

Thank you very much for the help, Arjan! Finally got it working. 'request' should indeed be 'http'. Probably forgot to change it. I still find it strange it did work in Firefox with my code though. Ah well, it works now. Thanks again for the help!

[adb64]

FF doesn't use the ActiveXObject to do Ajax like IE does, but it uses the XMLHttpRequest() and that is why it did work on FF.

En graag gedaan, succes!