Jquery-UI tabs : Double loading of the default tab

Question

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?

Answer 1

Here is how I solved my double loading problem when using the tabs in the masterpage and loading a content place holder in each of them so that I would could get to each tab with a different url :

 $(function () {
        var first = true;
        var $tabs = $("#channel-tabs").tabs(
                        {
                            ajaxOptions: {
                                beforeSend: function (xhttp) {
                                    if (first) return false;
                                },
                                error: function (xhr, status, index, anchor) {
                                    $(anchor.hash).html("Couldn't load this tab. " + xhr.responseText);
                                }
                         },
                         select: function (event, ui) {
                                first = false;
                         },
                         cache: true,
                        });
    });

When the page load, I cancel the Ajax request if it's the first time it happens, I reenable it at the first selection of a tab.

It's not as clean as I would like to, but It does the job well.