How to load ui tab content on ajax call using asp.net razor

Question

I have a page that has a lot of (necessary) tabs, so it does a lot of calls to get the info but I only want to get that information only if that tab is clicked.

I have something like this:

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top"><a class="ui-tabs-anchor" href="#listing-global-view">@Resources.GetResourceString("Strings", "GlobalView")</a></li>
    ...
</ul>

<div id="listing-global-view" class="startup-active ui-tabs-panel ui-widget-content ui-corner-bottom">
    @{Html.RenderPartial("ListingGlobalView", Model);}
</div>

Then my script initializes the tabs, but I only want the content associated to each tab when it's clicked.

$('.tabbedwidget').tabs({
        active: 0,
        activate: function (event, ui) {
            var selectedSelector = ui.newPanel.selector; //ui.newTab[0].innerText;
            switch (selectedSelector)
            {
                case "#listing-global-view": {
                    //make ajax equivalent to @{Html.RenderPartial("ListingGlobalView", Model);}

                }
            }

        }
    });

UPDATE

Now I have another problem: since I only want the info associated to that tab be rendered on click, I changed the href tag to the action that renders the partial.

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top"><a class="ui-tabs-anchor" href="@Url.Action("ListingGlobalView", new { id = Model.ID })">@Resources.GetResourceString("Strings", "GlobalView")</a></li>
    ...
</ul>

When the tab is clicked it shows properly my partial view but inside this partial, I'm calling another partial that was supposed to call another actions (to fill combo information - json), but they're not doing it. The info only comes correctly when I say at my controller the 1st partial rendered is a view, but that way it renders me the layout...

Thanks.

Have you checked this out? http://stackoverflow.com/questions/7430976/rendering-partial-views-using-ajax — Jakotheshadows, Sep 18 '15 at 15:52

score 2 · Answer 1 · answered Sep 18 '15 at 16:01

You can try adding a data attribute, this attribute can be the url for the ajax call in your tab, for example:

$(document).on("ready",function(){
  $("#myTabs a").on("click",function(){
    var div = $(this).attr("href");
    $.ajax({
      url:$(this).data("url"),
      success:function(html){
        $(div).append(html);
      }
    });
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
    <ul id="myTabs" class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#home" data-url="https://www.google.com.mx" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li>
      <li role="presentation" class=""><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile" aria-expanded="false">Profile</a></li>
      <li role="presentation" class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
          <li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li>
          <li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
        </ul>
      </li>
    </ul>
    <div id="myTabContent" class="tab-content">
      <div role="tabpanel" class="tab-pane fade active in" id="home" aria-labelledby="home-tab">
        
      </div>
      <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
        
      </div>
      <div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledby="dropdown1-tab">
        
      </div>
      <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab">
        
      </div>
    </div>
  </div>

I took the tab snipet from here: http://getbootstrap.com/javascript/#tabs

Only left to validate when user make a click twice or more in a tab with content loaded... — Trino EGlez, Sep 18 '15 at 16:02
Thanks for the answer @Trino EGlez. I'll try to put my divs content in partial views and then call them via ajax, the problem is that those partial views call other partial views and give me error. Let's see what I can do. ;) — xatz, Sep 21 '15 at 09:36

How to load ui tab content on ajax call using asp.net razor

1 Answers1