Question

I’m loading a comment list and try to replace the list I currently have on my html page with the new loaded one.

Previously, my version was to load the list (which was simple xml), iterate over its elements and generate my content.
It worked well, but I had to iterate and create the elements one by one, and the xml thing was useless, except for debug.

Now, I’m trying to change the xml page so that we can view it either as html (standalone) or as xml (for ajax needs, i.e. only the core thing).

I replace it like that :

// ajax call to populate the comments
    $.ajax({
        type: 'GET',
        url: 'flow/' + target,
        dataType: 'xml',
        success: function(xml){
                var list = $(xml).find('#flow');

                // var $list = $layer.find('#flow');
                // $list.children().remove();
                // we process it for events :
                //  --to implement--

                // we simply replace the list
                $layer.find('#flow').replaceWith(list);

                // update the scrollpane
                updateScrollPane();
        },
        error: function(xhrq, status, code){
            formError('Could not load the comments.<br />Error with xhr : status=' + status + ', code=' + code);
            // and we log it
            log('Error with xhr : status=' + status + ', code=' + code);
            updateScrollPane();
        }
    });

But the problem is that it gets inserted correctly, but it’s considered as xml by the browser and therefore styling doesn’t work correctly.

i.e. here is a possible list which gets loaded :

<?xml version="1.0"?>
            <ul id="flow" path="2012/grammont" target="IMG_9610.JPG" valid="false">
<!-- no comment yet, be the first ! -->
                <li class="no-comment" />
<!-- Log : 
New FlowDB(2012/grammont/flow.db, IMG_9610.JPG)
 -->
            </ul> <!-- end of the real content -->

I guess my problem is that it is wrongly interpreted by jquery as xml (but I used $(xml).find(‘#flow’), so it should only get the DOM elements and put the xml header away…).

Currently, the correct li elements are HTMLLIElement objects, while the one which I get inserted are of simple type Element (i.e. not interpreted by the browser).

How do I make sure the browser gets it as html and not mixed elements from xml ?

Edit :

if I try to generate simple html without the xml header, and load it with no dataType (or dataType: ‘html’), the result is even worse because my current list is deleted, and nothing is put to replace it…

Answer 1

XML elements are not the same as HTML elements (they actually carry an empty xmlns attribute when inserted in the DOM, so the browser will not consider them as styleable HTML elements, even if the node names appear to be the same).

Since you’re working with HTML data, you should instruct jQuery to load the markup as HTML, not XML:

$.ajax({
    type: "GET",
    url: "flow/" + target,
    dataType: "html",
    // ...
});

And maybe use HTML5 data attributes so you can embed additional information in your markup without making it invalid:

<ul id="flow" data-path="2012/grammont"
    data-target="IMG_9610.JPG" data-valid="false">