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!

Answer 1

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