[SOLVED] SELECT options not showing in IE

[MrMastermind]

Hi,

I' trying to fill a SELECT with options using AJAX and prototype.js. The script is working fine in Firefox but doesn't work in IE. As far as I can debug I can see that IE messes up the code it gets back from my script. All calls through the javascripts seem to be correct and all parameters are passed correctly. Can anyone tell me how to fix this? Here's the output of IE and below that the javascript to make the calls:

[code]
        <SELECT id="subthema" size="1" name="subthema">
          - Kies een subthema -
          </OPTION>
          <//OPTION>
          <OPTION value="1"></OPTION>
          Aardappels-Groente-Fruit
          </OPTION>
          <//OPTION>
          <OPTION value="2"></OPTION>
          Brood
          </OPTION>
          <//OPTION>
          <OPTION value="3"></OPTION>
          Dranken
          </OPTION>
          <//OPTION>
          <OPTION value="4"></OPTION>
          Eieren en Zuivel
          </OPTION>
          <//OPTION>
          <OPTION value="5"></OPTION>
          Vlees en Vleeswaren
          </OPTION>
          <//OPTION>
          <OPTION value="6"></OPTION>
          Voeding overig
          </OPTION>
          <//OPTION>
        </SELECT>
[/code]

[code]
// Ajax dynamic dropdown
Event.observe(window, 'load', function(){etopiaAjaxDyndrop.init()}, false);

var etopiaAjaxDyndrop = {

init: function(){
if(Settings.CMS == 1){
if(escape($F('sid')) !=0){
this.fillsubthema();
}
if(escape($F('ssid'))!=0){
this.fillsubsubthema(1);
}
}
    Event.observe(Settings.sub1, 'change', function(){etopiaAjaxDyndrop.fillsubthema()}, false);
Event.observe(Settings.sub2, 'change', function(){etopiaAjaxDyndrop.fillsubsubthema()}, false);
},

fillsubthema: function(){
    var url = Settings.baseDir + 'class.etopiaAjaxDyndrop.processor.php';
    var pars = 'table=subthemas&pid='+escape($F('thema'))+'&id='+escape($F('sid'));
alert(pars);
    var target = 'subthema';
    var myAjax = new Ajax.Updater({success: target}, url, {method: 'get', parameters: pars, onFailure: this.reportError});
},

fillsubsubthema: function(chng){
    var url = Settings.baseDir + 'class.etopiaAjaxDyndrop.processor.php';
if(chng == 1){
var pars = 'table=subsubthemas&pid='+escape($F('sid'))+'&id='+escape($F('ssid'));
}else{
// Haal Sub-subthemas op aan de hand van het subthema
var pars = 'table=subsubthemas&pid='+escape($F('subthema'))+'&id='+escape($F('ssid'));
}
    var target = 'subsubthema';
    var myAjax = new Ajax.Updater({success: target}, url, {method: 'get', postBody: pars, onFailure: this.reportError});
},

reportError: function(){
alert("Er is een fout opgetreden");
}
}
[/code]


Hope anyone can help me with this!

Thanks in advance!

[ober]

Are you getting any errors?  Can you show us the PHP file that generates the output?  Also, if it's not working in IE, make sure you're not passing back <form> tags.

[MrMastermind]

Thanks for the reply ober, here's the PHP code that is generated:

[code]
$sql = "SELECT * FROM ".$_REQUEST['table']." WHERE pid=".$_REQUEST['pid'];
$res = fmsq($sql);

print '<option  value="">- Kies een subthema -</option>';

foreach($res as $key){
print '<option value="'.$key['id'].'"';
if($key['id'] == $_REQUEST['id'] ){print 'selected="selected"';}
print '>'.$key['subthema'].'</option>';
}
[/code]

[artacus]

Get rid of this crap.
<//OPTION>

Its a wonder it works in Firefox.

Try this instead
<select id="subthema" size="1" name="subthema">
<option value="1">Aardappels-Groente-Fruit</option>
<option value="2">Brood</option>
</select>

[MrMastermind]

Thanks for the reply Artacus,

but the "crap" is not generated by the script (see the code I added in my previous reply), but by Internet Explorer. So Firefox doesn't need a "wonder" to make it work, Firefox is the browser that parses the code correctly it's IE that messes up the generated code...

[ober]

No offense here MrMastermind... but IE wouldn't be parsing it wrong.  I'm going to suggest that there is a piece of code that you're not showing us because I've used this type of thing for a lot of different situations and never had IE parse the returned code any different from any other browser!

[MrMastermind]

Thanks Ober, but it's only something I read on another forum and I don't see another explanation because Firefox is showing it correctly and IE messes up the code (in my view). It could very well be I'm missing something here, because I used the developer toolbar from IE to debug and display the parsed HTML.

But anyway, here's the only other bit of code you did not yet see, which is the starting HTML code from where the select will be filled, the Event.observe() code in the ajax script in one of my previous replies captures the change of the select and fills it:

[code]
<select size="1" id="thema" name="thema">
<option selected="selected" value="">- Kies een thema -</option>
<? foreach($themas as $thema){
print '<option value="'.$thema['id'].'">'.$thema['hoofdthema'].'</option>';
}
?>
</select><br />
<select id="subthema" name="subthema" size="1">
<option selected="selected" value="">- Kies eerst een thema -</option>
</select><br />
[/code]

[MrMastermind]

Ober,

Maybe you're willing to share one of your solutions so I can compare and maybe find out what is wrong with my solution?

[Peschello]

To my knowledge, you do not need to include the </option> closing tag (just like you don't have to include <form> and </form> tags. Try removing the </option> tag entirely and see what happens.

[ober]

ahh... another non-standard move.  Not a good idea IMO.  Just because you don't "have to" doesn't mean you shouldn't.

Is there a link to a live version of this that we can play with?

[Peschello]

http://www.w3schools.com/ajax/ajax_database.asp

W3 Schools is the first place I learned AJAX from, and I assumed they were following standards when their example did not include </option> tags. Were they wrong?

[ober]

http://www.w3.org/TR/html4/intro/sgmltut.html

Please see the bottom of that document.  Or search the w3.org site for other references.  I think you'll find that they always use the closing tag.  While the above document doesn't specifically SAY one way or the other, their example indicates that it's better to use it.

[MrMastermind]

Guys, I also always use closing tags as they are absolutely the W3C standards! But for the sake of my problem, do you have any idea how I can solve it?

[MrMastermind]

I changed the SELECT to a DIV to see what I got back from the script, here's the output:

[code]- Kies een subthema -
<option value="1">Aardappels-Groente-Fruit</option>
<option value="2">Brood</option>
<option value="3">Dranken</option>
<option value="4">Eieren en Zuivel</option>
<option value="5">Vlees en  Vleeswaren</option>
<option value="6">Voeding overig</option>
[/code]

As you can see, the first line doesn't contain the OPTION tag, but in the PHP script you can see below, I did send it:

[code]
$sql = "SELECT * FROM ".$_REQUEST['table']." WHERE pid=".$_REQUEST['pid'];
$res = fmsq($sql);

print '<option  value="">- Kies een subthema -</option>';

foreach($res as $key){
print '<option value="'.$key['id'].'"';
if($key['id'] == $_REQUEST['id'] ){print ' selected="selected"';}
print '>'.$key['subthema'].'</option>';
}
[/code]

It remains a very strange issue...

[MrMastermind]

I have found a workaround, I just put the SELECT inside a DIV and just update the content of the DIV completely with a new generated SELECT with all options.
Still strange why IE just won't parse the options to the SELECT, but then again IE has more very strange issues...

Thanks for all the support guys!