Reload tab content on click using jQuery?

Question

I'd appreciate if someone could advise on the following: I have several tabs in my main view:

  <ul class='tabs' id="tabs" style="width: 100%">
        <li class="active"><a href='#tab1'>Status</a></li>
        <li class="inactive"><a href='#tab2'>Visit</a></li>
        ...
    </ul>


<div id='tab1'>
    <div id="StatusData">
        @{Html.RenderPartial("AddStatusPartial", Model.Card);}
    </div>
</div>
<div id='tab2'>
    <div id="VisitData">
        @{Html.RenderPartial("AddVisitPartial", Model.Card);}
    </div>
</div>

My script for the tabs works like this:

 $('ul.tabs').each(function () {
        // For each set of tabs, we want to keep track of
        // which tab is active and it's associated content
        var $active, $content, $links = $(this).find('a');

        // If the location.hash matches one of the links, use that as the active tab.
        // If no match is found, use the first link as the initial active tab.
        $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
        $active.addClass('active');
        $content = $($active.attr('href'));

        // Hide the remaining content
        $links.not($active).each(function () {
            $($(this).attr('href')).hide();
        });

        // Bind the click event handler
        $(this).on('click', 'a', function (e) {
            // Make the old tab inactive.
            $active.removeClass('active');
            $content.hide();

            // Update the variables with the new link and content
            $active = $(this);
            $content = $($(this).attr('href'));

            // Make the tab active.
            $active.addClass('active');

            $content.show();

            // Prevent the anchor's default click action
            e.preventDefault();
        });
    });

The only thing I need is to reload the only second tab's content (rerender partial view) when it is clicked instead of just showing it. When clicking on other tabs, the content should be displayed, as it works now.

I want exactly to reload the second tab, because it's data depends on the changes made in other tabs, so to display those changes, I need to rerender the partial view.

Link Here

Answer 1

You'll need some actions to return the corresponding partial views...

Then you'll need to code as follows:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="/products/new">Tab 1</a></li>
    <li><a href="/products/resale">Tab 2</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>

Script goes like:

 $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });