CODEWITHSUNDEEP
jqueryasp.net-mvctabs
adimauro
adimauro

Reputation: 333

ASP.NET MVC - How to re-run jQuery tabs script after getJSON call?

I have some data wrapped in 3 divs, each div represents a 'tab', and a jQuery script to create the tab effect. The 3 tabs include hours of operation, contact info, location info.

Pretty standard, nothing special. When the page loads, the following script is run, creating the 'tab' effect.


    $(document).ready(function () {
        tabs({
            block: "#branch"
        });
    });

I have a drop down list that triggers a call to an action that returns a JsonResult, and the following code to handle the change:


    $("#branches").change(function () {
        $("#branches option:selected").each(function () {
            $.getJSON("/Branch/JsonBranch/" + $(this)[0].value, null, function (data) {
                $("#branchinfo").html(data);
            });
        });
    });

The action is a variation on the post ASP.NET MVC - Combine Json result with ViewResult

The action code isn't relevant. The problem is that, since I'm not reloading the whole page, the 'tab' script is never run again. So, once the html code is replaced, ALL the data shows, the tabs are not created.

Is there a way to run the tab script again after just reloading that one portion of the page? I tried adding the call to tabs() in the .change() function call, but that didn't work.

Any help would be appreciated! Thanks!

Upvotes: 1

Views: 612

Answers (2)

tvanfosson
tvanfosson

Reputation: 532465

You should be able to add it in your getJSON callback.

$("#branches").change(function () {
     $("#branches option:selected").each(function () {
         $.getJSON("/Branch/JsonBranch/" + $(this)[0].value, null, function (data) {
             $("#branchinfo").html(data);
             tabs({ block: "#branch" });
          });
     });
 });

Upvotes: 2

NKCSS
NKCSS

Reputation: 2746

Normally, I assing the 'tabs' class to my tab targets.

I then trigger them with $('.tabs').tabs();

That way, I can call it as much as I want, even after dynamicly adding more.

By the way; I can recommed the Cookie plugin for the tabs; that way, your selected tab is remembered.

Upvotes: 0

Related Questions