Question

Good Morning,

I have a really simple script that works fine on everything but IE. I’m populating a dropdown menu with information from a database using an XML response in the following format:

<options>
    <option>Option1</option>
    <option>Option2</option>
...
</options>

I’m getting this data like so:

var options = $.ajax({
          url     :   "/static/scripts/php/search.php",
          type    :   "POST",
          data    :   {search_key :   key}
      }).responseText;

And the response is coming back just fine, regardless of browser. IE and Chrome alert the response text the same.

But when I do:

 $(options).find('option').each(function() {
         var option = document.createElement('option');
         $(option).attr("value", $(this).text()).text($(this).text());
         $(select).append(option);
     });

IE never enters the each() loop, meaning it’s not finding “option” in the response text. I’m at my wit’s end with this. It’s too simple of a script to be spending this much time on. Any help?

I’ve run the script through JSLint looking for small, odd items, and it’s clean.

Thanks,

Tom

Answer 1

responseText is a string, try parsing it as xml first.

options = $.parseXML(responseText);

Also, generally you don’t want to use the response text in that way. It is usually best to use the done callback or success callback.

$.ajax({
  url: "url",
  ...
  dataType: "xml", // so that it will auto parse it as xml
  success: function(xml){
    // do something with xml
  }
});

or

$.ajax({
  url: "url",
  ...
  dataType: "xml" // so that it will auto parse it as xml
}).done(function(xml){
  // do something with xml
});