jQuery using html() on array not working in IE

Question

I have some XML

<carouselitem name='carouselitem'><flick><pic>/images/test1.jpg</pic><headertext>sdfsdfsdf csfdfsdf</headertext><dek>sdfsfsd sdfsf dsfsfdsfds sdf sdfsfds</dek></flick></carouselitem>

Wrapped in DIV with an id of carousel. The below works fine for FF

var carouselarray = $('#carousel carouselitem');
 jQuery.each(carouselarray, function(){
  var row_to_insert = $(this).html();
  carouselxml += row_to_insert;
 });

The row_to_insert var get filled with the XMl fine in FF but is empty in IE and Chrome. Any help would eb appreciated

Thanks

Answer 1

I think you need to use [name=carouselitem] to sepcify the attribute you are looking for. This code (for me anyways) fills row_to_insert correctly. Let me know if this is what you are looking for.

var carouselxml = '';

var carouselarray = $('#carousel [name=carouselitem]');
    jQuery.each(carouselarray, function(){
            var row_to_insert = $(this).html();
            console.log(row_to_insert);
            carouselxml += row_to_insert;
    });

Answer 2

I believe this is failing because you're creating custom tags. If you look at the innerHTML property, you'll see that it's blank for IE. To get IE to recognize the custom tags, checkout: http://ajaxian.com/archives/adding-custom-tags-to-internet-explorer-the-official-way & http://msdn.microsoft.com/en-us/library/ms531076%28VS.85%29.aspx.

Answer 3

I'd suggest not inserting the XML right into your HTML, but rather putting it into a file

carousel.xml

<carousel>
    <carouselitem name="carouselitem">
    ...

and then calling it using the jquery ajax function. IE will need a work around, because there's some strange bug where it doesn't handle the incomming xml correctly from your local machine. From a server it doesn't have this problem.

$.ajax({
    url: "carousel.xml",
    dataType: ($.browser.msie) ? "text" : "xml",
    success: function(data) {
        var xml;
        if (typeof data == "string") {
            xml = new ActiveXObject("Microsoft.XMLDOM");
            xml.async = false;
            xml.loadXML(data);
        } else {
            xml = data;
        }

        $(xml).find("carouselitem").each(function() {
            //your code...
        });
    )
});