CODEWITHSUNDEEP
jqueryjquery-ui-tabs
Vijay
Vijay

Reputation: 5433

jquery ui tabs showing exception when selecting using jquery?

I've a simple UI tabs like this

<div id="tabs">             
<ul><li><a href="#tabs-1">Single</a></li><li><a href="#tabs-2">Matchmaker</a></li></ul></div>

later i use the jquery option to select a tab 

<script type="text/javascript">    
$(document).ready(
    function() {
        var role = 1; //some value, this value changes and i'm sure its has its value.
        $("#tabs").tabs("option", "selected", role);
    }
);
</script>

i've even tried $("#tabs").tabs("option", "selected", 0);

but no luck.. what may be the error?

Upvotes: 0

Views: 184

Answers (2)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

You should do like this:

$(document).ready(
    function() {
        var role = 1; //some value, this value changes and i'm sure its has its value.
        $("#tabs").tabs({ selected: role  });
    }
);

fiddle here: http://jsfiddle.net/6rB2w/1/

EDIT - there was a problem with the markup: look at this fiddle that is working: http://jsfiddle.net/6rB2w/11/

<div id="tabs">             
<ul><li><a href="#tabs-1">Single</a></li><li><a href="#tabs-2">Matchmaker</a></li></ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis.</p>
    </div>
</div>

$(document).ready(
    function() {
        var role = 1; //some value, this value changes and i'm sure its has its value.
        $("#tabs").tabs();
        alert('now change the selected tab');
        $("#tabs").tabs( "select", role );
    }
);

The problem is that the first div must wrap around the other two divs otherwise when you swtich tab with $("#tabs").tabs( "select", role ); it gives an error

Upvotes: 1

ddinchev
ddinchev

Reputation: 34673

The proper way to do it is .tabs('select', TAB-INDEX) (tab index is zero-based).

Upvotes: 0

Related Questions