jQuery Tabs UI 和 Ajax 链接问题

发布于 10-15 05:26 字数 2299 浏览 8 评论 0原文

ajax 和选项卡链接谜题。我已经阅读了所有文档和 SO,但无法让它发挥作用。

有效的是链接 Non-ajax Tab One。从另一个页面或 URL 直接链接到选项卡是行不通的。

即,如果我访问 http://mydomain.com/ajaxloadedpage1/ 我会得到内容的纯文本并且未在选项卡中呈现。如果我转到 http://mydomain.com/#ajaxloadedpage1 我会得到第一个选项卡 Non-ajax Tab One 。

如何在选项卡中加载 ajax 页面?我通过php加载ajax内容并且源文件没有.html文件后缀,这是否很复杂?

编辑 2/11/11 仍然无法正常工作,但我会在弄清楚后添加修复程序。

标题代码

ajax loader:

$(function() {
    $("#tabs").tabs({
        ajaxOptions: {
        error: function(xhr, status, index, anchor) {
            $(anchor.hash).html("I tried to load this, but couldn't. Try another link?");
            } 
        } 
    });
});


link enabler:

$(document).ready(function(){ 
    var $tabs= $("#tabs").tabs(); 
    $('.ajaxloadedpage1').click(function() { 
        $tabs.tabs('select', 1); 
        return false;
    }); });


(other links removed for clarity)

页面代码:

<div id="tabs">
<ul><a href="#tabs-1">Non-ajax Tab One</a></li>
<li><a id="#ajaxloadedpage1" href="http://mydomain.com/ajaxloadedpage1/"><span>Ajax Loaded Page1</span></a></li>
<li><a id="#ajaxloadedpage2" href="http://mydomain.com/ajaxloadedpage2/"><span>Ajax Loaded Page2</span></a></li>
<li><a id="#ajaxloadedpage3" href="http://mydomain.com/ajaxloadedpage3/"><span>Ajax Loaded Page3</span></a></li>
<ul>


<div id="tabs-1">Non-ajax Tab One</div>

//This tab has link to other tabs in this fashion, and they work

<a href="#ajaxloadedpage1" class="ajaxloadedpage1" title="Ajax Loaded Page1">Ajax Loaded Page1</a>

<a href="#ajaxloadedpage2" class="ajaxloadedpage2" title="Ajax Loaded Page2">Ajax Loaded Page2</a>

<a href="#ajaxloadedpage3" class="ajaxloadedpage3" title="Ajax Loaded Page3">Ajax Loaded Page3</a>
</div></div>


<div id="ajaxloadedpage1"></div>

<div id="ajaxloadedpage2"></div>

<div id="ajaxloadedpage3"></div></div>

An ajax and tabs link puzzle. I've been through all the docs and SO and can't get this to work.

What works are the links Non-ajax Tab One. What doesn't work is a direct link to the tabs from another page or from a URL.

I.e., if I go to http://mydomain.com/ajaxloadedpage1/ I get the plain text of the content and not rendered in the tab. If I go to http://mydomain.com/#ajaxloadedpage1 I get the first tab Non-ajax Tab One.

How do I get the ajax page to load in the tab? Is it a complication that I am loading the ajax content via php and that the source file does not have the .html file suffix?

Edit 2/11/11 Still not working, but I will add the fix when I figure it out.

Header code

ajax loader:

$(function() {
    $("#tabs").tabs({
        ajaxOptions: {
        error: function(xhr, status, index, anchor) {
            $(anchor.hash).html("I tried to load this, but couldn't. Try another link?");
            } 
        } 
    });
});


link enabler:

$(document).ready(function(){ 
    var $tabs= $("#tabs").tabs(); 
    $('.ajaxloadedpage1').click(function() { 
        $tabs.tabs('select', 1); 
        return false;
    }); });


(other links removed for clarity)

Page code:

<div id="tabs">
<ul><a href="#tabs-1">Non-ajax Tab One</a></li>
<li><a id="#ajaxloadedpage1" href="http://mydomain.com/ajaxloadedpage1/"><span>Ajax Loaded Page1</span></a></li>
<li><a id="#ajaxloadedpage2" href="http://mydomain.com/ajaxloadedpage2/"><span>Ajax Loaded Page2</span></a></li>
<li><a id="#ajaxloadedpage3" href="http://mydomain.com/ajaxloadedpage3/"><span>Ajax Loaded Page3</span></a></li>
<ul>


<div id="tabs-1">Non-ajax Tab One</div>

//This tab has link to other tabs in this fashion, and they work

<a href="#ajaxloadedpage1" class="ajaxloadedpage1" title="Ajax Loaded Page1">Ajax Loaded Page1</a>

<a href="#ajaxloadedpage2" class="ajaxloadedpage2" title="Ajax Loaded Page2">Ajax Loaded Page2</a>

<a href="#ajaxloadedpage3" class="ajaxloadedpage3" title="Ajax Loaded Page3">Ajax Loaded Page3</a>
</div></div>


<div id="ajaxloadedpage1"></div>

<div id="ajaxloadedpage2"></div>

<div id="ajaxloadedpage3"></div></div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

二货你真萌2024-10-22 05:26:39

您的 id 属性中真的有 # 吗?您的示例 HTML 是这样说的:

<li><a id="#ajaxloadedpage1" ...
<li><a id="#ajaxloadedpage2" ...
<li><a id="#ajaxloadedpage3" ...

但我认为您想说的是:

<li><a id="ajaxloadedpage1" ...
<li><a id="ajaxloadedpage2" ...
<li><a id="ajaxloadedpage3" ...

还有其他类似的情况。

jQuery-UI 选项卡内有一些特殊的 URL 片段修改,以解决各种浏览器错误和奇怪现象;当您只是单击鼠标时,这种损坏可能会隐藏问题,但当您通过 URL 到达那里时则不会。

Do you really have # in your id attributes? Your sample HTML say this:

<li><a id="#ajaxloadedpage1" ...
<li><a id="#ajaxloadedpage2" ...
<li><a id="#ajaxloadedpage3" ...

but I think you want to say this:

<li><a id="ajaxloadedpage1" ...
<li><a id="ajaxloadedpage2" ...
<li><a id="ajaxloadedpage3" ...

There are other cases like this too.

There is some special URL fragment mangling inside the jQuery-UI tabs to work around various browser bugs and oddities; that mangling could be hiding the problem when you're just clicking around but not when you get there through a URL.

初懵2024-10-22 05:26:39

你看过 jQuery.load 函数吗? http://api.jquery.com/load/

示例:加载ajaxloadedpage2的#ajaxloadedpage div。 php 进入#ajaxloadedpage2:

$('#ajaxloadedpage2').load('ajaxloadedpage2.php #ajaxloadedpage');

did you look at the jQuery.load function? http://api.jquery.com/load/

example: load the #ajaxloadedpage div of ajaxloadedpage2.php into #ajaxloadedpage2:

$('#ajaxloadedpage2').load('ajaxloadedpage2.php #ajaxloadedpage');
混浊又暗下来2024-10-22 05:26:39

我不确定这是否是您想要的,但我对 jQuery UI 选项卡使用 cookie 选项,如下所示:

<script type="text/javascript">
    $(document).ready(function(){
    $("#tabs_start").tabs({
        cookie: {
        // store cookie for a day, without, it would be a session cookie
            expires: 1
        }
    });
</script>

这存储了我上次访问页面时使用的选项卡。只需确保不同的选项卡集具有不同的 id 即可。

I'm not sure if this is what you want but I use the cookie option for jQuery UI tabs like this:

<script type="text/javascript">
    $(document).ready(function(){
    $("#tabs_start").tabs({
        cookie: {
        // store cookie for a day, without, it would be a session cookie
            expires: 1
        }
    });
</script>

This stores the tab I was using last time I visited a page. Just make sure your different tab sets have different ids.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文