jquery ui tab select method not working

Question

I have two tabs with a submit button on each tab. When the button is clicked, I need to reload the content of that specific tab to get updated data from the server.

if (validStatus()) {
    $.ajax({
        //...
        success: reloadTab
    });
}    

function reloadTab() {                
            var currentTab = $("#tabs").tabs("option", "active");
            alert(currentTab);
            $('#tabs').tabs('select', currentTab);
            alert(currentTab);
        }

When the button is clicked, the tab doesn't refresh. I see the first alert but not the second.

HTML is as follows:

Head:

<link rel="stylesheet" href="@this.Url.Content("//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css")" />
<script>
    $(function () {
        $("#tabs").tabs();
    });
</script>

Body:

<div id="tabs">
<ul>
    <li><a href="#Tab1" title="Tab1">The first tab</a></li>
    <li><a href="#Tab2" title="Tab2">the second tab</a></li>
    <li><a href="#Success" title="Success">Success</a></li>
</ul>

<div id="Success">
    testing
</div>

<div id="Tab1">

    <fieldset >
        <legend>Overview</legend>
        <input type="button" id="submit1" value="submit" />
        <br />
    </fieldset>

    <fieldset style="width: 700px;">
        <legend>Overview</legend>
        <div>
            <table >
            //updated with ajax
            </table>
        </div>
    </fieldset>

    <script>
        //reloadTab is in here
    </script>
</div>

<div id="Tab2">

    <fieldset style="float:left; width:300px;">
        <input id="submit2" type="button" value="submit"/>
    </fieldset>

    <fieldset style="float:left;">
        <legend>Overview</legend>
        <table>
        //updated with ajax
        </table>
    </fieldset>

    <script>.....</script>
</div>

Community · Accepted Answer · 2017-05-23 12:33:58Z

5

Turns out tabs.('select', ...) is deprecated, using tabs.('option', 'active', index) fixed my issue. Solution found in this comment: https://stackoverflow.com/a/16033969/1463649

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Jul 5, 2013 at 17:11

Zach

4473 gold badges10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anderson Pimentel Over a year ago

For me the opposite worked! I was working in a quite old application and struggling with the option, active. Just switched to the good old select.

rasputino Over a year ago

Thanks! You give me the hint! For my worked with $("#tabs").tabs({ active: index });

Andrei Cristian Prodan · Accepted Answer · 2013-07-05 15:51:59Z

0

Do you see anything in the console of your browser? What browser are you using?
Try this to help you with the debugging.

function reloadTab() {    

console.log($('#tabs')); // if this is an empty object, the element doesn't exist when you call this function
console.log($('#tabs').tabs()); // if this doesn't return 'function', you haven't included a library properly, maybe jquery ui, or jquery, or you're using an old version or something
console.log(currentTab); // if this is undefined then something went wrong and no tab is active            
        var currentTab = $("#tabs").tabs("option", "active");
        alert(currentTab);
        $('#tabs').tabs('select', currentTab);
        alert(currentTab);
    }

answered Jul 5, 2013 at 15:51

Andrei Cristian Prodan

1,1224 gold badges17 silver badges34 bronze badges

1 Comment

Zach Over a year ago

Firebug gives me this error "Error: no such method 'select' for tabs widget instance." Is this a version issue?

Collectives™ on Stack Overflow

jquery ui tab select method not working

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related