Thread

Does anybody know how to make jQuery.tabs work via a XMLHttpRequest?

I’m am not 100% sure what I am doing wrong.  I can get the data from the XML and XLS to load on the page but I cant get .tabs to activate.  Not sure if my Ajax call for .tabs is correct.

$('#art-info ul').tabs({ remote: true });

Here is my test page: http://sf.grantmx.com/sf_goes_gospel_artists_ajax.html
The path to the XML and XLS is in the source code.

Thanks guys!

Have a look at these examples
http://dev.jquery.com/view/trunk/ui/demos/ui.tabs.html

Yeah, I saw that and tried it, but not sure what’s going on.

I also tried putting the .tabs scripts in the XLS file to see if it was a parsing order issue, but it doesn’t seem to matter.

The trouble you are encountering is related to the fact that you are AJAX calling the entire list and content on load. Unfortunately the A in AJAX means Asynchronous, thus your jQuery call is completed before your AJAX content is loaded.

So why are you calling the AJAX content in your own javascript?
Use jQuerys AJAX call and put the tab call in the callback, so the content is loaded when you try to apply the tabs.

Thanks asozzi.  I though it was something along how it was being called.  Nice. 😉

- No particular reason.  It was a solution I found that did the job for the XMLHttpRequest.

- I’m sort of a nob at the jQuery AJAX call, can you post an example of what you mean?

Got the tabs activated by appending this to the XMLHttpRequest function:

function showFeed(xmlUrl, xslUrl) {
    var feed = document.getElementById('pagecell');
    //clear feed div
    while(feed.hasChildNodes()){
        feed.removeChild(feed.childNodes[0]);
    }
    //append new htmlfragment
    feed.appendChild(getHtmlFragment(xmlUrl, xslUrl));

    $('#art-info > ul').tabs();

}

and droping this part:

$(function() {
        $('#art-info > ul').tabs();
});

Still not loading in their respective tab containers for some reason.  😠
http://sf.grantmx.com/sf_goes_gospel_artists_ajax.html

Dolt! :shut:  Forgot the:

media projection, screen { 
    .ui-tabs-hide {
        display: none;
    }
}

Got it working.  Too sweet! 😉