CODEWITHSUNDEEP
jquery
robbie
robbie

Reputation:

jquery ui custom tab with ajax tabs

I am using jquery UI tabs

I have three ajax tabs like so:

<div id="tabs">
    <ul>
        <li><a href="linktopage1.jsp">Failed EIV Pre-Screening</a></li>
        <li><a href="linktopage2.jsp">Failed SSA Screening</a></li>
        <li><a href="linktopage3.jsp">Pending Verification</a></li>
    </ul>
</div>

I would like to make the second tab show up by default when the page is loaded.

I tried the following code.

<script type="text/javascript">
    $(document).ready(function () {
        var $tabs = $('#tabs').tabs();
        $tabs.tabs('select', 1);
    });
</script>

Now when the page loads....code in linktopage2.jsp is executed, HOWEVER, on the screen still the first tab is selected and the screen is empty. I explicitly have to click the second tab for the data to show up.

What am I doing wrong or is there something else that can be done?

Upvotes: 0

Views: 911

Answers (1)

SolutionYogi
SolutionYogi

Reputation: 32233

From the doc, use 'selected' property.

$('#tabs').tabs({ selected: 2 });

Upvotes: 2

Related Questions