CODEWITHSUNDEEP
jqueryasp.net-mvcjquery-ui
TheBoubou
TheBoubou

Reputation: 19903

jQuery UI tab, the active tab not change

See the code below. Code used in an ASP.NET MVC application. When I arrive on the page, no problem, I see the first tab content. I click on the second tab, I see the content of this second tab. I return to the first tab still no problem but when I try to go again on the second that's not work, I stay on the first tab.

The $.post work and return the right value but the first tab stay active.

Could you help me ?

Thanks,

<script type="text/javascript">
    $(document).ready(function() {
        var $tabs = $("#tabs").tabs({
            select: function (e, ui) {
                var thistab = ui;
                runMethod(thistab.index);
            }
        });
    });

    function runMethod(thistab) {
        selectedtab = thistab;
        switch (thistab) {
            case 0:
                $.post("/MyController/Action1", { var1: 1, var2: 0 },
                        function (data) {
                            $("#tabs-1").replaceWith(data);
                        }
                 );
                break;
            case 1:
                $.post("/MyController/Action2", { var1: 2, var2: 1 },
                        function (data) {
                            $("#tabs-2").replaceWith(data);
                        }
                 );
                break;
            case 2:
                alert(2);
                break;
        }
    }
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">Tab2</a></li>
        <li><a href="#tabs-3">Tab3</a></li>
    </ul>
    <div id="tabs-1">Tab1</div>
    <div id="tabs-2">Tab2</div>
    <div id="tabs-3">Tab3</div>
</div>

Upvotes: 1

Views: 1684

Answers (1)

Ron DeFreitas
Ron DeFreitas

Reputation: 657

Have you tried simply using the built-in AJAX functionality of the jquery ui tabs?

http://jqueryui.com/demos/tabs/#ajax

<div id="tabs">
    <ul>
        <li><a href="/MyController/Action1/?var1=1&var2=0">Tab 1</a></li>
        <li><a href="/MyController/Action2/?var1=2&var2=1">Tab 2</a></li>
    </ul>
</div>

<script type="text/javascript">
    $(document).ready(function() {
    $("#tabs").tabs({ ajaxOptions: { type: "POST" }, cache: false });  //incorporated tobias86's suggestion of setting the cache option
    });
</script>

Upvotes: 2

Related Questions