title: Jquery-UI tabs : Double loading of the default tab
body: <p>I use jqueryui-tabs to display a tabbed UI.
  here is how my markup looks in a <strong>MasterPage</strong>:</p>
  
  <pre><code>&lt;div id="channel-tabs" class="ui-tabs"&gt;
      &lt;ul class="ui-tabs-nav"&gt;
          &lt;li&gt;&lt;%=Html.ActionLink("Blogs", "Index", "Blog", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, new{ title="Blog Results" }) %&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%=Html.ActionLink("Forums", "Index", "Forums", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%=Html.ActionLink("Twitter", "Index", "Twitter", new { query = Model.Query, lang = Model.SelectedLanguage, fromTo = Model.FromTo, filters = Model.FilterId }, null) %&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
     &lt;div id="Blog_Results"&gt;
          &lt;asp:ContentPlaceHolder ID="ResultPlaceHolder" runat="server"&gt;
          &lt;/asp:ContentPlaceHolder&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>somewhat like this : </p>
  
  <pre><code>&lt;asp:Content ID="Content2" ContentPlaceHolderID="BlogPlaceHolder" runat="server"&gt;
      &lt;%=Html.Partial("Partial",Model) %&gt;
  &lt;/asp:Content&gt;
  
  //same goes for the other tabs.
  </code></pre>
  
  <p>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.</p>
  
  <p>I tried putting a <strong>different placeholder for each tab</strong>, 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.<br>
  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...</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>So to sum up : </p>
  
  <ul>
  <li>/Forum should load the forum tab, and let the other tabs be loaded with an ajax call when clicking on it.</li>
  <li>/Twitter should load the twitter tab and let the other tabs....</li>
  <li>the same goes for /Blogs and any tabs I would add later.</li>
  </ul>
  
  <p>Any idea to have this working properly?</p>