]> source.dussan.org Git - jquery-ui.git/commitdiff
Tabs: Add beforeload event; deprecate ajaxOptions and cache options. Fixes #7131...
authorDavid Petersen <public@petersendidit.com>
Sat, 26 Mar 2011 19:00:39 +0000 (15:00 -0400)
committerDavid Petersen <public@petersendidit.com>
Sun, 27 Mar 2011 01:00:34 +0000 (21:00 -0400)
tests/unit/tabs/tabs.html
tests/unit/tabs/tabs_defaults.js
tests/unit/tabs/tabs_defaults_deprecated.js [new file with mode: 0644]
tests/unit/tabs/tabs_deprecated.html [new file with mode: 0644]
tests/unit/tabs/tabs_deprecated.js [new file with mode: 0644]
tests/unit/tabs/tabs_events.js
tests/unit/tabs/tabs_options.js
ui/jquery.ui.tabs.js

index 74855ca9aa9b7f09731eaacb232634d5bdd6600e..02fbfe3bb0db036b4fb15a6284916dd52146213f 100644 (file)
@@ -7,6 +7,9 @@
        <link type="text/css" href="../../../themes/base/jquery.ui.tabs.css" rel="stylesheet" />
 
        <script type="text/javascript" src="../../../jquery-1.5.1.js"></script>
+       <script>
+               $.uiBackCompat = false;
+       </script>
        <script type="text/javascript" src="../../../external/jquery.cookie.js"></script>
        <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
        <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
index ef93c69ee5d9638e96b55c73b8c0eb9ba2411e94..4f663fbf2b1ff2309f5802930739064fc808088e 100644 (file)
@@ -4,8 +4,7 @@
 
 var tabs_defaults = {
        add: null,
-       ajaxOptions: null,
-       cache: false,
+       beforeload: null,
        collapsible: false,
        cookie: null,
        disable: null,
diff --git a/tests/unit/tabs/tabs_defaults_deprecated.js b/tests/unit/tabs/tabs_defaults_deprecated.js
new file mode 100644 (file)
index 0000000..73e9ffe
--- /dev/null
@@ -0,0 +1,28 @@
+/*
+ * tabs_defaults.js
+ */
+
+var tabs_defaults = {
+       add: null,
+       ajaxOptions: null,
+       beforeload: null,
+       cache: false,
+       collapsible: false,
+       cookie: null,
+       disable: null,
+       disabled: false,
+       enable: null,
+       event: "click",
+       fx: null,
+       idPrefix: "ui-tabs-",
+       load: null,
+       panelTemplate: "<div></div>",
+       remove: null,
+       select: null,
+       show: null,
+       spinner: "<em>Loading&#8230;</em>",
+       tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>"
+};
+
+// FAIL: falsy values break the cookie option
+commonWidgetTests( "tabs", { defaults: tabs_defaults } );
diff --git a/tests/unit/tabs/tabs_deprecated.html b/tests/unit/tabs/tabs_deprecated.html
new file mode 100644 (file)
index 0000000..3b92767
--- /dev/null
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+       <meta charset="UTF-8" />
+       <title>jQuery UI Tabs Test Suite</title>
+
+       <link type="text/css" href="../../../themes/base/jquery.ui.tabs.css" rel="stylesheet" />
+
+       <script type="text/javascript" src="../../../jquery-1.5.1.js"></script>
+       <script type="text/javascript" src="../../../external/jquery.cookie.js"></script>
+       <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+       <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+       <script type="text/javascript" src="../../../ui/jquery.ui.tabs.js"></script>
+
+       <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
+       <script type="text/javascript" src="../../../external/qunit.js"></script>
+       <script type="text/javascript" src="../../jquery.simulate.js"></script>
+       <script type="text/javascript" src="../testsuite.js"></script>
+       
+       <script type="text/javascript" src="tabs_core.js"></script>
+       <script type="text/javascript" src="tabs_defaults_deprecated.js"></script>
+       <script type="text/javascript" src="tabs_events.js"></script>
+       <script type="text/javascript" src="tabs_methods.js"></script>
+       <script type="text/javascript" src="tabs_options.js"></script>
+       <script type="text/javascript" src="tabs_tickets.js"></script>
+       <script type="text/javascript" src="tabs_deprecated.js"></script>
+       
+       <script type="text/javascript">
+       // disable this stale testsuite for testswarm only
+       var url = window.location.search;
+       url = decodeURIComponent( url.slice( url.indexOf("swarmURL=") + 9 ) );
+       if ( url && url.indexOf("http") == 0 ) {
+               // reset config to kill previous tests; make sure testsuite.js is loaded afterwards to init the testswarm script
+               QUnit.init();
+               test("tabs", function() { ok(true, "disabled tabs testsuite"); });
+       }
+       </script>
+       <script type="text/javascript" src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery UI Tabs Test Suite (deprecated)</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="qunit-fixture">
+
+               <div id="tabs1">
+                       <ul>
+                               <li><a href="#fragment-1"><span>1</span></a></li>
+                               <li><a href="#fragment-2"><span>2</span></a></li>
+                               <li><a href="#fragment-3"><span>3</span></a></li>
+                       </ul>
+                       <div id="fragment-1"></div>
+                       <div id="fragment-2"></div>
+                       <div id="fragment-3"></div>
+               </div>
+               <div id="tabs2">
+                       <ul>
+                               <li><a href="#colon:test"><span>1</span></a></li>
+                               <li><a href="#inline-style"><span>2</span></a></li>
+                               <li><a href="data/test.html#test"><span>3</span></a></li>
+                               <li><a href="data/test.html" title="∫ßáö Սե"><span>4</span></a></li>
+                       </ul>
+                       <div id="colon:test"></div>
+                       <div style="height: 300px;" id="inline-style"></div>
+               </div>
+               <div id="tabs3">
+                       <div>
+                               <ul id="tabs3-list">
+                                       <li><a href="#tabs3-1">1</a></li>
+                               </ul>
+                       </div>
+               </div>
+               <div id="tabs4">
+                       <ul id="tabs4-list">
+                               <li><a href="#tabs4-1">1</a></li>
+                       </ul>
+                       <ol>
+                               <li><a href="#tabs4-1">1</a></li>
+                       </ol>
+               </div>
+               <div id="tabs4a">
+                       <ol id="tabs4a-list">
+                               <li><a href="#tabs4a-1">1</a></li>
+                       </ol>
+                       <ul>
+                               <li><a href="#tabs4a-1">1</a></li>
+                       </ul>
+               </div>
+               <div id="tabs5">
+                       <div>
+                               <ul id="tabs5-list"></ul>
+                       </div>
+               </div>
+               <div id="tabs6">
+                       <ul id="tabs6-list">
+                               <li><a href="#tabs6-1">1</a>
+                                       <ul>
+                                               <li><a href="#item6-3">3</a></li>
+                                               <li><a href="#item6-4">4</a></li>
+                                       </ul>
+                               </li>
+                               <li><a href="#tabs6-2">2</a></li>
+                       </ul>
+                       <div id="tabs6-1"></div>
+                       <div id="tabs6-2"></div>
+               </div>
+               <div id="tabs7">
+                       <ul id="tabs7-list">
+                               <li><a href="#tabs7-1">1</a></li>
+                               <li><a href="#tabs7-2">2</a></li>
+                       </ul>
+                       <div id="tabs7-2"></div>
+                       <div id="tabs7-1"></div>
+               </div>
+       </div>
+</body>
+</html>
diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js
new file mode 100644 (file)
index 0000000..72034c0
--- /dev/null
@@ -0,0 +1,13 @@
+(function( $ ) {
+
+module("tabs (deprecated): cache and ajaxoptions");
+
+test('ajaxOptions', function() {
+       ok(false, "missing test - untested code is broken code.");
+});
+
+test('cache', function() {
+       ok(false, "missing test - untested code is broken code.");
+});
+
+}( jQuery ) );
index 24fb62f9b728b47aaf17c2c80aefcb1648ce5066..26ea76fb49ccadd601c444b44dbc828f7bf4f570 100644 (file)
@@ -26,6 +26,25 @@ test('select', function() {
        equals( evenObj.originalEvent.type, "click", "select triggered by click" );
 });
 
+test('beforeload', function() {
+       expect( 5 );
+
+       el = $('#tabs2');
+
+       el.tabs({
+               selected: 2,
+               beforeload: function( event, ui ) {
+                       ok( $.isFunction( ui.jqXHR.promise ), 'contain jqXHR object');
+                       equals( ui.settings.url, "data/test.html", 'contain ajax settings url');
+                       equals( ui.tab, el.find('a')[ 2 ], 'contain tab as DOM anchor element');
+                       equals( ui.panel, el.find('div')[ 2 ], 'contain panel as DOM div element');
+                       equals( ui.index, 2, 'contain index');
+                       event.preventDefault();
+               }
+       });
+
+});
+
 test('load', function() {
        ok(false, "missing test - untested code is broken code.");
 });
index 1c621ac280f608e175852d95d175ed56e791727d..cf50bd97029552743069475fa66522ce35141284 100644 (file)
@@ -5,14 +5,6 @@
 
 module("tabs: options");
 
-test('ajaxOptions', function() {
-       ok(false, "missing test - untested code is broken code.");
-});
-
-test('cache', function() {
-       ok(false, "missing test - untested code is broken code.");
-});
-
 test('collapsible', function() {
        expect(4);
 
index f12383d08b7de59bd781a24c4561cd5c7e7682ca..39f1b537be0fd6950e0788f8867dd931635490fe 100755 (executable)
@@ -27,8 +27,7 @@ function getNextListId() {
 $.widget( "ui.tabs", {
        options: {
                add: null,
-               ajaxOptions: null,
-               cache: false,
+               beforeload: null,
                cookie: null, // e.g. { expires: 7, path: '/', domain: 'jquery.com', secure: true }
                collapsible: false,
                disable: null,
@@ -246,11 +245,6 @@ $.widget( "ui.tabs", {
                        $( li ).toggleClass( "ui-state-disabled", $.inArray( i, o.disabled ) != -1 );
                }
 
-               // reset cache if switching from cached to not cached
-               if ( o.cache === false ) {
-                       this.anchors.removeData( "cache.tabs" );
-               }
-
                // remove all handlers before, tabify may run on existing tabs after add or option change
                this.lis.add( this.anchors ).unbind( ".tabs" );
 
@@ -431,7 +425,7 @@ $.widget( "ui.tabs", {
                                this.href = href;
                        }
                        var $this = $( this ).unbind( ".tabs" );
-                       $.each( [ "href", "load", "cache" ], function( i, prefix ) {
+                       $.each( [ "href", "load" ], function( i, prefix ) {
                                $this.removeData( prefix + ".tabs" );
                        });
                });
@@ -607,57 +601,45 @@ $.widget( "ui.tabs", {
                var self = this,
                        o = this.options,
                        a = this.anchors.eq( index )[ 0 ],
-                       url = $.data( a, "load.tabs" );
+                       url = $.data( a, "load.tabs" ),
+                       eventData = self._ui( self.anchors[ index ], self.panels[ index ] );
 
                this.abort();
 
-               // not remote or from cache
-               if ( !url || this.element.queue( "tabs" ).length !== 0 && $.data( a, "cache.tabs" ) ) {
+               // not remote
+               if ( !url ) {
                        this.element.dequeue( "tabs" );
                        return;
                }
 
-               // load remote from here on
-               this.lis.eq( index ).addClass( "ui-state-processing" );
-
-               if ( o.spinner ) {
-                       var span = $( "span", a );
-                       span.data( "label.tabs", span.html() ).html( o.spinner );
-               }
-
-               this.xhr = $.ajax( $.extend( {}, o.ajaxOptions, {
+               this.xhr = $.ajax({
                        url: url,
-                       success: function( r, s ) {
-                               self.element.find( self._sanitizeSelector( a.hash ) ).html( r );
-
-                               // take care of tab labels
-                               self._cleanup();
+                       beforeSend: function( jqXHR, settings ) {
+                               return self._trigger( "beforeload", null,
+                                               $.extend( { jqXHR: jqXHR, settings: settings }, eventData ) );
+                       }
+               });
 
-                               if ( o.cache ) {
-                                       $.data( a, "cache.tabs", true );
-                               }
+               if ( this.xhr ) {
+                       // load remote from here on
+                       this.lis.eq( index ).addClass( "ui-state-processing" );
 
-                               self._trigger( "load", null, self._ui( self.anchors[ index ], self.panels[ index ] ) );
-                               try {
-                                       o.ajaxOptions.success( r, s );
-                               }
-                               catch ( e ) {}
-                       },
-                       error: function( xhr, s, e ) {
-                               // take care of tab labels
-                               self._cleanup();
-
-                               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 ) {}
+                       if ( o.spinner ) {
+                               var span = $( "span", a );
+                               span.data( "label.tabs", span.html() ).html( o.spinner );
                        }
-               } ) );
+
+                       this.xhr
+                               .success( function( response ) {
+                                       self.element.find( self._sanitizeSelector( a.hash ) ).html( response );
+                               })
+                               .complete( function( jqXHR, status ) {
+                                       // take care of tab labels
+                                       self._cleanup();
+
+                                       self._trigger( "load", null, eventData );
+                               });
+               }
 
                // last, so that load event is fired before show...
                self.element.dequeue( "tabs" );
@@ -686,7 +668,7 @@ $.widget( "ui.tabs", {
        },
 
        url: function( index, url ) {
-               this.anchors.eq( index ).removeData( "cache.tabs" ).data( "load.tabs", url );
+               this.anchors.eq( index ).data( "load.tabs", url );
                return this;
        },
 
@@ -699,4 +681,74 @@ $.extend( $.ui.tabs, {
        version: "@VERSION"
 });
 
+// DEPRECATED
+if ( $.uiBackCompat !== false ) {
+
+       // ajaxOptions and cache options
+       (function( $, prototype ) {
+               $.extend( prototype.options, {
+                       ajaxOptions: null,
+                       cache: false
+               });
+
+               var _create = prototype._create,
+                       _setOption = prototype._setOption,
+                       _destroy = prototype._destroy,
+                       oldurl = prototype._url;
+
+               $.extend( prototype, {
+                       _create: function() {
+                               _create.call( this );
+
+                               var self = this;
+
+                               this.element.bind( "tabsbeforeload", function( event, ui ) {
+                                       // tab is already cached
+                                       if ( $.data( ui.tab, "cache.tabs" ) ) {
+                                               event.preventDefault();
+                                               return;
+                                       }
+
+                                       $.extend( ui.settings, self.options.ajaxOptions, {
+                                               error: function( xhr, s, e ) {
+                                                       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)
+                                                               self.options.ajaxOptions.error( xhr, s, ui.index, ui.tab );
+                                                       }
+                                                       catch ( e ) {}
+                                               }
+                                       });
+
+                                       ui.jqXHR.success( function() {
+                                               if ( self.options.cache ) {
+                                                       $.data( ui.tab, "cache.tabs", true );
+                                               }
+                                       });
+                               });
+                       },
+
+                       _setOption: function( key, value ) {
+                               // reset cache if switching from cached to not cached
+                               if ( key === "cache" && value === false ) {
+                                       this.anchors.removeData( "cache.tabs" );
+                               }
+                               _setOption.apply( this, arguments );
+                       },
+
+                       _destroy: function() {
+                               this.anchors.removeData( "cache.tabs" );
+                               _destroy.call( this );
+                       },
+
+                       url: function( index, url ){
+                               this.anchors.eq( index ).removeData( "cache.tabs" );
+                               oldurl.apply( this, arguments );
+                       }
+               });
+       }( jQuery, jQuery.ui.tabs.prototype ) );
+}
+
 })( jQuery );