Asp.Net MVC load a partial view using ajax from a JQuery UI tab

Question

I have several action methods on my controller that return a partial view (ascx), and I want these partial views to be rendered when clicking on the different JQuery UI tabs.

The tabs are defined like this:

<div id="tabs">
  <li><a href="#FirstTab" title="First tab">First tab</a></li>
  <li><%= Html.ActionLink("General", "General", new {id=Model.Id}) %></li>
  <li><%= Html.ActionLink("Details", "Details", new {id=Model.Id}) %></li>
  <div id="FirstTab">
  ...
  </div>
</div>

This renders the tabs fine, the first tab (with static content) is displayed correctly, but when I click the other tabs, nothing happens.

If instead of returning a partial view from the action methods I just return plain content, it renders the content just fine and the tabs work perfectly.

Any idea of what am I doing wrong?

Thanks

So far everything looks good. Can you check whether the ajax call is actually occurring? And if it is occurring, what is being returned from the action? You can check this easily with tools like FireBug. — Johnny Oshika
– Johnny Oshika, Commented Oct 29, 2009 at 15:10
Hi Johnny, yes, the call is occurring (I put breakpoints in the actions and they were hit). I fixed the problem using aspx pages instead of ascx (the aspx pages don't have the html, head or body tags, just the control I want to render). This seems strange though, or maybe it's that I don't have clear the difference between View and PartialView — willvv
– willvv, Commented Oct 29, 2009 at 16:48

Misha N. · Accepted Answer · 2009-10-29 16:07:46Z

11

Hey, I've done the same thing recently. I simplified in order to be more clear:

The html:

    <div class="tabs">
              <ul>
                   <li>
                       <a onclick="TabItemClicked(this,<%=Url.Action("General", new {id=Model.Id}) %>))" href="#fragment1">
                       <span>General</span>
                       </a>
                   </li>
                   <li>
                       <a onclick="TabItemClicked(this,<%= Html.ActionLink("Details", new {id=Model.Id}) %>))" href="#fragment2">
                       <span>Details</span>
                       </a>
                   </li>
              </ul>
              <div id="fragment1"></div>
              <div id="fragment2"></div>
  </div>

and the JQuery code:

function TabItemClicked(a, action) {

    var container = $(a).parents('div.tabs');
    var resultDiv = $($(a).attr('href'), container);

    $.ajax({
        type: "POST",
        url: action,
        data: {},
        success: function(response) {
            resultDiv.html('');
            resultDiv.html(response);
        }
    });
}

answered Oct 29, 2009 at 16:07

Misha N.

3,4551 gold badge30 silver badges36 bronze badges

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

1 Comment

willvv Over a year ago

Thanks, I know this will work, but I was trying to achieve it with the default functionality of JQuery UI tabs...

Collectives™ on Stack Overflow

Asp.Net MVC load a partial view using ajax from a JQuery UI tab

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related