The jQueryUI ajax tabs example doesn't work

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/6605323/the-jqueryui-ajax-tabs-example-doesnt-work

标签

jquery

ajax

jquery-ui