diff options
| -rw-r--r-- | demos/tabs/ajax.html | 11 | ||||
| -rw-r--r-- | demos/tabs/ajax/content2.html | 2 | ||||
| -rw-r--r-- | demos/tabs/ajax/content3-slow.php | 7 | ||||
| -rw-r--r-- | demos/tabs/ajax/content4-broken.php | 3 | ||||
| -rw-r--r-- | ui/jquery.ui.tabs.js | 19 |
5 files changed, 38 insertions, 4 deletions
diff --git a/demos/tabs/ajax.html b/demos/tabs/ajax.html index c531e1ba9..1bb8e5130 100644 --- a/demos/tabs/ajax.html +++ b/demos/tabs/ajax.html @@ -10,7 +10,13 @@ <link type="text/css" href="../demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { - $("#tabs").tabs(); + $("#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> @@ -23,6 +29,8 @@ <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="ajax/content1.html">Ajax Tab 1</a></li> <li><a href="ajax/content2.html">Ajax Tab 2</a></li> + <li><a href="ajax/content3-slow.php">Ajax Tab 3 (slow)</a></li> + <li><a href="ajax/content4-broken.php">Ajax 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> @@ -35,6 +43,7 @@ <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> diff --git a/demos/tabs/ajax/content2.html b/demos/tabs/ajax/content2.html index 2e4320af0..95c25dae0 100644 --- a/demos/tabs/ajax/content2.html +++ b/demos/tabs/ajax/content2.html @@ -1,4 +1,4 @@ -<p><strong>This content was loaded via ajax.</strong> +<p><strong>This other content was loaded via ajax.</strong> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec turpis justo, et facilisis ligula. In congue interdum odio, a scelerisque eros posuere ac. Aenean massa tellus, dictum sit amet laoreet ut, aliquam in orci. Duis eu aliquam ligula. Nullam vel placerat ligula. Fusce venenatis viverra dictum. Phasellus dui dolor, imperdiet in sodales at, mattis sed libero. Morbi ac ipsum ligula. Quisque suscipit dui vel diam pretium nec cursus lacus malesuada. Donec sollicitudin, eros eget dignissim mollis, risus leo feugiat tellus, vel posuere nisl ipsum eu erat. Quisque posuere lacinia imperdiet. Quisque nunc leo, elementum quis ultricies et, vehicula sit amet turpis. Nullam sed nunc nec nibh condimentum mattis. Quisque sed ligula sit amet nisi ultricies bibendum eget id nisi.</p> <p>Proin ut erat vel nunc tincidunt commodo. Curabitur feugiat, nisi et vehicula viverra, nisl orci eleifend arcu, sed blandit lectus nisl quis nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aenean rutrum gravida velit ac imperdiet. Integer vitae arcu risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt orci at leo egestas porta. Vivamus ac augue et enim bibendum hendrerit ut id urna. Donec sollicitudin pulvinar turpis vitae scelerisque. Etiam tempor porttitor est sed blandit. Phasellus varius consequat leo eget tincidunt. Aliquam ac dui lectus. In et consectetur orci. Duis posuere nulla ac turpis faucibus vestibulum. Sed ut velit et dolor rhoncus dapibus. Sed sit amet pellentesque est.</p> <p>Nam in volutpat orci. Morbi sit amet orci in erat egestas dignissim. Etiam mi sapien, tempus sed iaculis a, adipiscing quis tellus. Suspendisse potenti. Nam malesuada tristique vestibulum. In tempor tellus dignissim neque consectetur eu vestibulum nisl pellentesque. Phasellus ultrices cursus velit, id aliquam nisl fringilla quis. Cras varius elit sed urna ultrices congue. Sed ornare odio sed velit pellentesque id varius nisl sodales. Sed auctor ligula egestas mi pharetra ut consectetur erat pharetra.</p>
\ No newline at end of file diff --git a/demos/tabs/ajax/content3-slow.php b/demos/tabs/ajax/content3-slow.php new file mode 100644 index 000000000..9e50dc3ac --- /dev/null +++ b/demos/tabs/ajax/content3-slow.php @@ -0,0 +1,7 @@ +<?php +sleep(1); +?> +<p><strong>This content was loaded via ajax, though it took a second.</strong> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec turpis justo, et facilisis ligula. In congue interdum odio, a scelerisque eros posuere ac. Aenean massa tellus, dictum sit amet laoreet ut, aliquam in orci. Duis eu aliquam ligula. Nullam vel placerat ligula. Fusce venenatis viverra dictum. Phasellus dui dolor, imperdiet in sodales at, mattis sed libero. Morbi ac ipsum ligula. Quisque suscipit dui vel diam pretium nec cursus lacus malesuada. Donec sollicitudin, eros eget dignissim mollis, risus leo feugiat tellus, vel posuere nisl ipsum eu erat. Quisque posuere lacinia imperdiet. Quisque nunc leo, elementum quis ultricies et, vehicula sit amet turpis. Nullam sed nunc nec nibh condimentum mattis. Quisque sed ligula sit amet nisi ultricies bibendum eget id nisi.</p> +<p>Proin ut erat vel nunc tincidunt commodo. Curabitur feugiat, nisi et vehicula viverra, nisl orci eleifend arcu, sed blandit lectus nisl quis nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aenean rutrum gravida velit ac imperdiet. Integer vitae arcu risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt orci at leo egestas porta. Vivamus ac augue et enim bibendum hendrerit ut id urna. Donec sollicitudin pulvinar turpis vitae scelerisque. Etiam tempor porttitor est sed blandit. Phasellus varius consequat leo eget tincidunt. Aliquam ac dui lectus. In et consectetur orci. Duis posuere nulla ac turpis faucibus vestibulum. Sed ut velit et dolor rhoncus dapibus. Sed sit amet pellentesque est.</p> +<p>Nam in volutpat orci. Morbi sit amet orci in erat egestas dignissim. Etiam mi sapien, tempus sed iaculis a, adipiscing quis tellus. Suspendisse potenti. Nam malesuada tristique vestibulum. In tempor tellus dignissim neque consectetur eu vestibulum nisl pellentesque. Phasellus ultrices cursus velit, id aliquam nisl fringilla quis. Cras varius elit sed urna ultrices congue. Sed ornare odio sed velit pellentesque id varius nisl sodales. Sed auctor ligula egestas mi pharetra ut consectetur erat pharetra.</p>
\ No newline at end of file diff --git a/demos/tabs/ajax/content4-broken.php b/demos/tabs/ajax/content4-broken.php new file mode 100644 index 000000000..55ea2fe9f --- /dev/null +++ b/demos/tabs/ajax/content4-broken.php @@ -0,0 +1,3 @@ +<?php +header("HTTP/1.0 404 Not Found"); +?>
\ No newline at end of file diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js index e7cfa10a1..6644f35b0 100644 --- a/ui/jquery.ui.tabs.js +++ b/ui/jquery.ui.tabs.js @@ -603,12 +603,27 @@ $.widget("ui.tabs", { o.ajaxOptions.success(r, s); } catch (e) {} + }, + error: function(xhr, s, e) { + // take care of tab labels + self._cleanup(); - // last, so that load event is fired before show... - self.element.dequeue("tabs"); + // callbacks + self._trigger('load', null, self._ui(self.anchors[index], self.panels[index])); + try { + // Passing index avoid a race condition when this method is + // called after the user has selected another tab. + // Pass the anchor that initiated this request allows + // loadError to manipulate the tab content panel via $(a.hash) + o.ajaxOptions.error(xhr, s, index, a); + } + catch (e) {} } })); + // last, so that load event is fired before show... + self.element.dequeue("tabs"); + return this; }, |