automatically load ajax loaded content (jquery ui tabs)

Question

I'm using jQuery UI Tabs to load some content via Ajax when the user clicks on the tabs. What I want is to load the content of the first tab automatically when the page loads without the user having to click on the tab. How do I achieve this?

Thank you

Answer 1

Just call the tab load method for the first tab (0) on page load:

$( function() {
    $( "#tabs" ).tabs( "load" , 0 );
}

This just loads the content. If you want to select a tab, use select , which also loads the content. This shouldn't be needed if you are loading the default tab:

$( function() {
    $( "#tabs" ).tabs( "select" , tabIndex );
}

Edit: For newer versions of jQuery, you need to use the active option:

$( function() {
    $( "#tabs" ).tabs( "option", "active", tabIndex );
}

Demo: http://jsfiddle.net/jtbowden/8zkfrbee

Answer 2

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

If you want you can also keep the content pre-loaded inside the first div that has an id="tabs-1" but if you use pre-loaded approach then you don't need to use a url in your first <a> inside <li> instead use

<li><a href="#tabs-1">First tab</a><li>

Answer 3

It looks like you can include elements within the top tag element to populate the tabs if you don't want to use ajax. The ID of the element containing the text just needs to match the anchor tag for the tab.

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="#tabs-2">Tab 1</a></li>
        <li><a href="ajax/content2.html">Tab 2</a></li>
        <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">
        <p>Hello, Tab One.</p>
    </div>
    <div id="tabs-2">
        <p>Hello, Tab Two.</p>
    </div>
</div>