Jquery-UI tabs : Double loading of the default tab

Posted by Stephane on Stack Overflow See other posts from Stack Overflow or by Stephane
Published on 2010-05-07T11:58:21Z Indexed on 2010/05/10 8:04 UTC
Read the original article Hit count: 679

I use jqueryui-tabs to display a tabbed UI. here is how my markup looks in a MasterPage:

<div id="channel-tabs" class="ui-tabs">
    <ul class="ui-tabs-nav">
        <li><%=Html.ActionLink("Blogs", "Index", "Blog", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, new{ title="Blog Results" }) %></li>
        <li><%=Html.ActionLink("Forums", "Index", "Forums", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li>
        <li><%=Html.ActionLink("Twitter", "Index", "Twitter", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %></li>
    </ul>

   <div id="Blog_Results">
        <asp:ContentPlaceHolder ID="ResultPlaceHolder" runat="server">
        </asp:ContentPlaceHolder>
    </div>

If the content is loaded via ajax, I return a partial view with the content of the tab. If the content is loaded directly, I load a page that include the content in the ContentPlaceHolder.

somewhat like this :

<asp:Content ID="Content2" ContentPlaceHolderID="BlogPlaceHolder" runat="server">
    <%=Html.Partial("Partial",Model) %>
</asp:Content>

//same goes for the other tabs.

With this in place, if I access the url "/Forums" It loads the forum content in the Blog tab first, trigger the ajax load of the Blog tab and replace the content with the blog content.

I tried putting a different placeholder for each tab, but that didn't fix everything either, since when loading "/Forums" it will sure load the forum tab, but the Blog tab will show up first.
Furthermore, when using separate placeholders, If I load the "/Blogs" url, It will first load the content statically in the Blog contentplaceholder and then trigger an ajax call to load it a second time and replace it. If I just link the tab to the hashtag, then when loading the forum tabs, I won't get the blog content...

How would you achieve the expected behaviour? I feel like I might have a deeper probelm in the organization of my views. Is putting the tabs in the masterpage the way to go? Maybe I should just hijax the links manually and not rely on jquery-ui tabs to do the work for me.

I cannot load all tabs by default and display them using the hash tags, I need an ajax loading because it is a search process that can be long.

So to sum up :

  • /Forum should load the forum tab, and let the other tabs be loaded with an ajax call when clicking on it.
  • /Twitter should load the twitter tab and let the other tabs....
  • the same goes for /Blogs and any tabs I would add later.

Any idea to have this working properly?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui-tabs