jQueryUI的Ajax选项卡的例子不工作 [英] The jQueryUI ajax tabs example doesn't work
问题描述
我在和jQueryUI的，具有开发束，但有问题。所以不是我想的另一种方法。
查看这里的例子： http://jqueryui.com/demos/tabs/ajax.html
点击选项卡2和标签3。一切工作正常。
现在，我查看和复制的HTML源$ C $ C到本地文件，并替换为绝对路径都是相对路径，例如：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =EN＆GT;
＆LT; HEAD＆GT;
＆LT;元字符集=utf-8＆GT;
＆LT;冠军＆GT; jQuery UI的标签 - 通过Ajax＆LT内容; /标题＆GT;
＆LT;链接相对=样式表的href =http://jqueryui.com/themes/base/jquery.ui.all.css＆GT;
＆LT;链接相对=样式表的href =http://jqueryui.com/demos/demos.css＆GT;
＆所述;脚本的src =http://jqueryui.com/jquery-1.5.1.js＆GT;＆所述; /脚本＆GT;
＆所述;脚本的src =http://jqueryui.com/ui/jquery.ui.core.js＆GT;＆所述; /脚本＆GT;
＆所述;脚本的src =http://jqueryui.com/ui/jquery.ui.widget.js＆GT;＆所述; /脚本＆GT;
＆所述;脚本的src =http://jqueryui.com/ui/jquery.ui.tabs.js＆GT;＆所述; /脚本＆GT;
＆LT;脚本＆GT;
$（函数（）{
$（#tabs）.tabs（{
ajaxOptions：{
错误：函数（XHR，状态，指数，锚）{
$（anchor.hash）。html的（
无法加载此标签。我们将尽力尽快解决这个问题。+
如果这不会是一个演示。 ）;
}
}
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV CLASS =演示＆GT;
＆LT; DIV ID =标签＆GT;
＆LT; UL＆GT;
＆LT;李＆GT;＆LT; A HREF =＃标签-1＆GT; preloaded＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =http://jqueryui.com/demos/tabs/ajax/content1.html＆GT;标签1＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =http://jqueryui.com/demos/tabs/ajax/content2.html＆GT;标签2'; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =http://jqueryui.com/demos/tabs/ajax/content3-slow.php＆GT;标签3（慢）＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =http://jqueryui.com/demos/tabs/ajax/content4-broken.php＆GT;表4（碎）LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; DIV ID =标签-1＆GT;
＆LT; P＆GT; Proin ELIT arcu，rutrum commodo，vehicula腾邦，commodo一个，risus。 Curabitur NEC arcu。 Donec sollicitudin MI坐阿梅德mauris。南elementum华富ullamcorper赌注。 Etiam aliquet马萨等LOREM。 Mauris dapibus拉克丝auctor risus。 Aenean tempor ullamcorper狮子座。 Vivamus SED麦格纳QUIS ligula eleifend adipiscing。 DUIS奥奇。 Aliquam sodales tortor简历存有。 Aliquam法无。 DUIS aliquam molestie ERAT。 UT斯达康等mauris德维尔PEDE山雀sollicitudin。桑达UT悲楚NEC奥奇tincidunt interdum。 Phasellus存有。 NUNC tristique腾邦lectus＆LT; / P＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT;！ - 结束演示 - ＆GT;
＆LT; DIV CLASS =演示说明＆GT;
＆LT; P＆GT;通过设置选项卡链接的href的值取通过Ajax外部内容的标签。虽然Ajax请求等待响应，该选项卡标签改变说载入中...，然后返回一旦加载正常的标签＆LT; / P＆GT;
＆其中p为H.;标签3和4表明缓慢加载和破碎的AJAX标签，以及如何处理在这些情况下的服务器端的错误。注：这两个要求的网络服务器间preT PHP。它们不会从文件系统工作＆所述; / P＆GT;
＆LT; / DIV＆GT;＆LT;！ - 结束演示描述 - ＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
现在复制此HTML，将其粘贴在本地.html文件，并查看其在浏览器中。
当我点击选项卡2和标签3，为本地文件，它给出了无法加载此标签的错误，这意味着它无法找到这些content1.html和content2.html文件 - 但这些确实存在，并且有内容：
http://jqueryui.com/demos/tabs/ajax/content1.html （和content2.html）
我是不是疯了服用药片吗？有人可以请解释一下我做错了什么？
在一个侧面说明：这个问题最初被弹起的地方做我的jQueryUI的例子，我认为它不喜欢本地的HTML文件的相对路径。上面这个例子表明，这是别的东西。
P.S。我想这个测试在Firefox（Ubuntu的，Windows中）和IE浏览器（Windows）中。同样的问题。
在此先感谢您的帮助。
这是因为这两个选项卡正在由Ajax请求加载，和你的本地副本没有权限/授权执行一个Ajax请求jQuery用户界面的网站。
通常情况下，你不能发送，因为 同源策略 。它说 -
I'm playing with jQueryUI, with the development-bundle, but having issues. So instead I'm trying another approach.
Check out the example here: http://jqueryui.com/demos/tabs/ajax.html
Click "Tab 2" and "Tab 3". Everything works fine.
Now, I viewed and copied the html source code into a local file, and replaced all relative paths to absolute paths as such:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<script src="http://jqueryui.com/jquery-1.5.1.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
}
});
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Preloaded</a></li>
<li><a href="http://jqueryui.com/demos/tabs/ajax/content1.html">Tab 1</a></li>
<li><a href="http://jqueryui.com/demos/tabs/ajax/content2.html">Tab 2</a></li>
<li><a href="http://jqueryui.com/demos/tabs/ajax/content3-slow.php">Tab 3 (slow)</a></li>
<li><a href="http://jqueryui.com/demos/tabs/ajax/content4-broken.php">Tab 4 (broken)</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links. While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p>
<p>Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.</p>
</div><!-- End demo-description -->
</body>
</html>
Now copy this HTML, paste it in a local .html file, and view it in your browser.
When I click "Tab 2" and "Tab 3" for the local file, it gives the "can't load this tab" error, which means it can't find those content1.html and content2.html files - but these really do exist and have content:
http://jqueryui.com/demos/tabs/ajax/content1.html (and content2.html)
Am I taking crazy pills here? Can somebody please explain what I'm doing wrong?
On a side note: This issue originally popped-up doing my jQueryUI examples locally, and I thought it didn't like relative paths to local html files. This example above shows that it's something else.
p.s. I tried this test in Firefox (Ubuntu, Windows) and IE (Windows). Same issue.
Thanks in advance for your help.
That's because these two tabs are being loaded by ajax request, and your local copy doesn't have permission/authorization to perform an ajax request to jquery ui's site.
Generally, you cannot send a cross-domain ajax request because of the same origin policy. It says -
The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites.
这篇关于jQueryUI的Ajax选项卡的例子不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
