[英]Jquery-UI tabs : Double loading of the default tab
I use jqueryui-tabs to display a tabbed UI. 我使用jqueryui-tabs显示选项卡式UI。 here is how my markup looks in a MasterPage :
这是我的标记在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. 如果内容是通过ajax加载的,则返回带有选项卡内容的部分视图。 If the content is loaded directly, I load a page that include the content in the ContentPlaceHolder.
如果直接加载内容,则会加载一个包含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. 有了这个,如果我访问URL“ / Forums”,它将首先在“博客”选项卡中加载论坛内容,触发“博客”选项卡的ajax加载并将内容替换为博客内容。
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. 我尝试为每个选项卡放置一个不同的占位符 ,但这也不能解决所有问题,因为在加载“ / Forums”时,它肯定会加载论坛选项卡,但“博客”选项卡将首先显示。
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. 此外,当使用单独的占位符时,如果我加载“ / Blogs” URL,它将首先在Blog contentplaceholder中静态加载内容,然后触发ajax调用以再次加载它并替换它。 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.
也许我应该手动手动隐藏链接,而不要依靠jquery-ui选项卡为我完成工作。
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. 默认情况下,我无法加载所有选项卡并使用井号标签显示它们,我需要ajax加载,因为这是一个漫长的搜索过程。
So to sum up : 综上所述:
Any idea to have this working properly? 有什么想法可以使其正常工作吗?
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 : 这是我在母版页中使用选项卡并在每个选项卡中加载内容占位符时解决双重加载问题的方法,这样我就可以使用不同的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. 当页面加载时,如果是第一次发生,我将取消Ajax请求,然后在第一次选择选项卡时将其重新启用。
It's not as clean as I would like to, but It does the job well. 它不像我想要的那样干净,但是做得很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.