styling the data loaded from another page

Question

Tabs plugin I use loads the data from another page. Data loaded is in xml format so I need to style that data loaded. How can I do it? ny suggestion highly appreciated.

tabs plugin

    $("div.row-title").tabs("div.panes", {effect: 'ajax'}, function(i) {
        // get the pane to be opened
        var pane = this.getPanes().eq(i);
        // load it with a page specified in the tab's href attribute
        pane.html('<img src="http://www.refinethetaste.com/FLPM/cp/images/loading.gif" alt="Loading..." />') 
            .load(this.getTabs().eq(i).attr("href"));
    }); 

xml

<rows>
−
<row id="1">
<MultimediaTitle>Hagi Goals</MultimediaTitle>
<ImageURL>/FLPM/media/images/5Y2K4T5V_sm.jpg</ImageURL>
−
<Videos>
−
<VideoID id="1">
<VideoURL>/FLPM/media/videos/0H7T9C0F.flv</VideoURL>
</VideoID>
−
<VideoID id="2">
<VideoURL>/FLPM/media/videos/9L6X9G9J.flv</VideoURL>
</VideoID>
</Videos>
</row>
</rows>

Answer 1

You could use XSLT to transform the XML to HTML using the xslt jquery plugin .

Then you can use the callbacks in the tabs plugin to fetch and transform the content. You would probably do this rather than use the built in ajax loading capabilities of the tab plugin, unless you can load the content of the tab with the raw, xml and then use the callbacks to trigger the xsl transform of the raw xml, but this seems a little hokie.