jQuery UI Tabs Ajax - only first tab displaying loaded content

Question

I have a set of jQuery UI tabs, which load their content via the ajax method:

<div id="tabs">
    <ul>
        <li><a href="/messages/inbox" title="Inbox"><span>Inbox</span></a></li>
        <li><a href="/messages/sent" title="Sent"><span>Sent</span></a></li>
        <li><a href="/messages/inbox" title="Ins"><span>Ins</span></a></li>
    </ul>
    <div id="Inbox"> ... </div>
    <div id="Sent"> ... </div>
    <div id="Ins"> ... </div>
</div>

JS:

$(document).ready(function () {
    $("#tabs").tabs();
}

The tab titles are displayed, and the content of the first tab is loaded OK.

Using the AJAX Tabs method is detailed here

When I switch to a different tab, I can see the browser loads the content for that tab, but the content isn't displayed.

Any ideas what I am missing?

Answer 1

replace your ul list by this :

 <ul>
        <li><a href="#Inbox" title="Inbox"><span>Inbox</span></a></li>
        <li><a href="#Sent" title="Sent"><span>Sent</span></a></li>
        <li><a href="#Ins" title="Ins"><span>Ins</span></a></li>
    </ul>

Answer 2

Have fixed it now. I had a subsequent $.ajaxSetup() call that was upsetting things.