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

Question

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!

Doesn't look like you are using the jQuery UI tabs plugin (at least directly). Any reason for that? — tvanfosson
– tvanfosson, Commented Apr 7, 2011 at 21:52
No real reason, I just liked the implementation on the following page: ilovecolors.com.ar/multiple-jquery-tabs — adimauro
– adimauro, Commented Apr 8, 2011 at 13:11

tvanfosson · Accepted Answer · 2011-04-07 21:49:32Z

2

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" });
          });
     });
 });

answered Apr 7, 2011 at 21:49

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

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

Comments

NKCSS · Accepted Answer · 2011-04-07 21:47:43Z

0

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.

answered Apr 7, 2011 at 21:47

NKCSS

2,7561 gold badge23 silver badges38 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related