CODEWITHSUNDEEP
jqueryajaxjquery-ui-tabs
ciro
ciro

Reputation: 801

jquery tabs - change tab after ajax call

i use jquery-ui tabs component. this is code in my page

<ul>
    <li><a href="#tabs-1">Anagrafica</a></li>
    <li><a href="#tabs-2">Corsi</a></li>
    <li><a href="#tabs-3">Pagamenti</a></li>
</ul>
<div id="tabs-1">
    //
</div>  
<div id="tabs-2">
    //
</div>
<div id="tabs-3">
    //
</div>

The components works perfect

is there a way to change displayed tab after ajax call?

when i perform ajax call tab2 is showed. i want display tab3 after ajax call

Upvotes: 0

Views: 2254

Answers (2)

Andres Separ
Andres Separ

Reputation: 3394

Try these tabs without jQueryUI

$('ul').each(function(){
    var $active, $content, $links = $(this).find('a');

    //Set focus when the page is reloaded
    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.parent().addClass('active');
    $content = $($active.attr('href'));

    //Hide containers
    $links.not($active).each(function () {
        $($(this).attr('href')).hide();
    });

    //Set click event
    $(this).on('click', 'a', function(e){
        $active.parent().removeClass('active');
        $content.hide();
        $active = $(this);
        $content = $($(this).attr('href'));
        $active.parent().addClass('active');
        $content.show();
        e.preventDefault();
    });
});

Upvotes: 3

Kristoffer J&#228;l&#233;n
Kristoffer J&#228;l&#233;n

Reputation: 4798

Yes, just use the active option:

$("ul").tabs("option", "active", 1); // Select tab 2

Upvotes: 1

Related Questions