From aeaaf93ebb51ab6ff61a42d365edfd3872ae2ebd Mon Sep 17 00:00:00 2001 From: David Petersen Date: Sat, 26 Mar 2011 15:00:39 -0400 Subject: [PATCH] Tabs: Add beforeload event; deprecate ajaxOptions and cache options. Fixes #7131 Tabs: Add beforeload event; deprecate ajaxOptions and cache options --- tests/unit/tabs/tabs.html | 3 + tests/unit/tabs/tabs_defaults.js | 3 +- tests/unit/tabs/tabs_defaults_deprecated.js | 28 ++++ tests/unit/tabs/tabs_deprecated.html | 122 ++++++++++++++++ tests/unit/tabs/tabs_deprecated.js | 13 ++ tests/unit/tabs/tabs_events.js | 19 +++ tests/unit/tabs/tabs_options.js | 8 -- ui/jquery.ui.tabs.js | 150 +++++++++++++------- 8 files changed, 287 insertions(+), 59 deletions(-) create mode 100644 tests/unit/tabs/tabs_defaults_deprecated.js create mode 100644 tests/unit/tabs/tabs_deprecated.html create mode 100644 tests/unit/tabs/tabs_deprecated.js diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html index 74855ca9a..02fbfe3bb 100644 --- a/tests/unit/tabs/tabs.html +++ b/tests/unit/tabs/tabs.html @@ -7,6 +7,9 @@ + diff --git a/tests/unit/tabs/tabs_defaults.js b/tests/unit/tabs/tabs_defaults.js index ef93c69ee..4f663fbf2 100644 --- a/tests/unit/tabs/tabs_defaults.js +++ b/tests/unit/tabs/tabs_defaults.js @@ -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 index 000000000..73e9ffede --- /dev/null +++ b/tests/unit/tabs/tabs_defaults_deprecated.js @@ -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: "

", + remove: null, + select: null, + show: null, + spinner: "Loading…", + tabTemplate: "

" +}; + +// 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 index 000000000..3b927675c --- /dev/null +++ b/tests/unit/tabs/tabs_deprecated.html @@ -0,0 +1,122 @@ + + + + + jQuery UI Tabs Test Suite + + + + + + + + + + + + + + + + + + + + + + + + + + + +

jQuery UI Tabs Test Suite (deprecated)

+ + +

+ +

1 +
- 3
- 4
+
2

+ + diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js new file mode 100644 index 000000000..72034c083 --- /dev/null +++ b/tests/unit/tabs/tabs_deprecated.js @@ -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 ) ); diff --git a/tests/unit/tabs/tabs_events.js b/tests/unit/tabs/tabs_events.js index 24fb62f9b..26ea76fb4 100644 --- a/tests/unit/tabs/tabs_events.js +++ b/tests/unit/tabs/tabs_events.js @@ -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."); }); diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js index 1c621ac28..cf50bd970 100644 --- a/tests/unit/tabs/tabs_options.js +++ b/tests/unit/tabs/tabs_options.js @@ -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); diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js index f12383d08..39f1b537b 100755 --- a/ui/jquery.ui.tabs.js +++ b/ui/jquery.ui.tabs.js @@ -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 ); -- 2.39.5