mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Tabs: Pass appropriate data for beforeLoad event. Partial fix for #7131 - Tabs: Add beforeload event; deprecate ajaxOptions and cache options.
This commit is contained in:
parent
995518c10f
commit
ff84d58444
@ -9,7 +9,7 @@ test( "#4581 - title attribute for remote tabs does not support foreign language
|
|||||||
selected: 3,
|
selected: 3,
|
||||||
beforeLoad: function( event, ui ) {
|
beforeLoad: function( event, ui ) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
equal( ui.panel.id, "∫ßáö_Սե", "proper title" );
|
equal( ui.panel.attr( "id" ), "∫ßáö_Սե", "proper title" );
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -140,21 +140,57 @@ test( "activate", function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test( "beforeLoad", function() {
|
test( "beforeLoad", function() {
|
||||||
expect( 5 );
|
expect( 21 );
|
||||||
|
|
||||||
el = $( "#tabs2" );
|
var tab, panelId, panel,
|
||||||
|
element = $( "#tabs2" ).tabs();
|
||||||
|
|
||||||
el.tabs({
|
// TODO: init
|
||||||
active: 2,
|
// element.one( "tabsbeforeload", function( event, ui ) {
|
||||||
beforeLoad: function( event, ui ) {
|
// });
|
||||||
ok( $.isFunction( ui.jqXHR.promise ), 'contain jqXHR object');
|
// element.tabs({ active: 2 });
|
||||||
equals( ui.settings.url, "data/test.html", 'contain ajax settings url');
|
|
||||||
equals( ui.tab, el.find('a')[ 2 ], 'contain tab as DOM anchor element');
|
// .option()
|
||||||
equals( ui.panel, el.find('div')[ 2 ], 'contain panel as DOM div element');
|
element.one( "tabsbeforeload", function( event, ui ) {
|
||||||
equals( ui.index, 2, 'contain index');
|
tab = element.find( ".ui-tabs-nav a" ).eq( 2 );
|
||||||
|
panelId = tab.attr( "aria-controls" );
|
||||||
|
panel = $( "#" + panelId );
|
||||||
|
|
||||||
|
ok( !( "originalEvent" in event ), "originalEvent" );
|
||||||
|
ok( "abort" in ui.jqXHR, "jqXHR" );
|
||||||
|
ok( ui.ajaxSettings.url, "data/test.html", "ajaxSettings.url" );
|
||||||
|
equals( ui.tab.size(), 1, "tab size" );
|
||||||
|
strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" );
|
||||||
|
equals( ui.panel.size(), 1, "panel size" );
|
||||||
|
strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" );
|
||||||
|
equals( ui.panel.html(), "", "panel html" );
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
tabs_state( element, 1, 0, 0, 0 );
|
||||||
});
|
});
|
||||||
|
element.tabs( "option", "active", 2 );
|
||||||
|
tabs_state( element, 0, 0, 1, 0 );
|
||||||
|
equals( panel.html(), "", "panel html after" );
|
||||||
|
|
||||||
|
// click
|
||||||
|
element.one( "tabsbeforeload", function( event, ui ) {
|
||||||
|
tab = element.find( ".ui-tabs-nav a" ).eq( 3 );
|
||||||
|
panelId = tab.attr( "aria-controls" );
|
||||||
|
panel = $( "#" + panelId );
|
||||||
|
|
||||||
|
equals( event.originalEvent.type, "click", "originalEvent" );
|
||||||
|
ok( "abort" in ui.jqXHR, "jqXHR" );
|
||||||
|
ok( ui.ajaxSettings.url, "data/test.html", "ajaxSettings.url" );
|
||||||
|
equals( ui.tab.size(), 1, "tab size" );
|
||||||
|
strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" );
|
||||||
|
equals( ui.panel.size(), 1, "panel size" );
|
||||||
|
strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" );
|
||||||
|
ui.panel.html( "<p>testing</p>" );
|
||||||
|
event.preventDefault();
|
||||||
|
tabs_state( element, 0, 0, 1, 0 );
|
||||||
|
});
|
||||||
|
element.find( ".ui-tabs-nav a" ).eq( 3 ).click();
|
||||||
|
tabs_state( element, 0, 0, 0, 1 );
|
||||||
|
equals( panel.html(), "<p>testing</p>", "panel html after" );
|
||||||
});
|
});
|
||||||
|
|
||||||
test('load', function() {
|
test('load', function() {
|
||||||
|
@ -46,7 +46,7 @@ test('#3627 - Ajax tab with url containing a fragment identifier fails to load',
|
|||||||
active: 2,
|
active: 2,
|
||||||
beforeLoad: function( event, ui ) {
|
beforeLoad: function( event, ui ) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
ok(/test.html$/.test( ui.settings.url ), 'should ignore fragment identifier');
|
ok(/test.html$/.test( ui.ajaxSettings.url ), 'should ignore fragment identifier');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -64,7 +64,7 @@ test('#4033 - IE expands hash to full url and misinterprets tab as ajax', functi
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
equals($('a', el).attr('aria-controls'), '#tab', 'aria-contorls attribute is correct');
|
equals($('a', el).attr('aria-controls'), 'tab', 'aria-contorls attribute is correct');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('#5893 - Sublist in the tab list are considered as tab', function() {
|
test('#5893 - Sublist in the tab list are considered as tab', function() {
|
||||||
|
46
ui/jquery.ui.tabs.js
vendored
46
ui/jquery.ui.tabs.js
vendored
@ -93,7 +93,7 @@ $.widget( "ui.tabs", {
|
|||||||
// check for length avoids error when initializing empty list
|
// check for length avoids error when initializing empty list
|
||||||
if ( o.active >= 0 && this.anchors.length ) {
|
if ( o.active >= 0 && this.anchors.length ) {
|
||||||
this.active = this._findActive( o.active );
|
this.active = this._findActive( o.active );
|
||||||
var panel = self.element.find( self._sanitizeSelector( this.active.attr( "aria-controls" ) ) );
|
var panel = self._getPanelForTab( this.active );
|
||||||
|
|
||||||
panel.show();
|
panel.show();
|
||||||
|
|
||||||
@ -129,7 +129,7 @@ $.widget( "ui.tabs", {
|
|||||||
},
|
},
|
||||||
|
|
||||||
_tabId: function( a ) {
|
_tabId: function( a ) {
|
||||||
return ( $( a ).attr( "aria-controls" ) || "" ).replace( /^#/ , "" ) ||
|
return ( $( a ).attr( "aria-controls" ) || "" ) ||
|
||||||
"ui-tabs-" + getNextTabId();
|
"ui-tabs-" + getNextTabId();
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -155,7 +155,7 @@ $.widget( "ui.tabs", {
|
|||||||
|
|
||||||
// Remove panels that we created that are missing their tab
|
// Remove panels that we created that are missing their tab
|
||||||
this.element.find(".ui-tabs-panel:data(destroy.tabs)").each( function( index, panel ) {
|
this.element.find(".ui-tabs-panel:data(destroy.tabs)").each( function( index, panel ) {
|
||||||
var anchor = self.anchors.filter( "[aria-controls='#" + panel.id + "']");
|
var anchor = self.anchors.filter( "[aria-controls='" + panel.id + "']");
|
||||||
if ( !anchor.length ) {
|
if ( !anchor.length ) {
|
||||||
$( panel ).remove();
|
$( panel ).remove();
|
||||||
}
|
}
|
||||||
@ -248,7 +248,7 @@ $.widget( "ui.tabs", {
|
|||||||
if ( panel.length) {
|
if ( panel.length) {
|
||||||
self.panels = self.panels.add( panel );
|
self.panels = self.panels.add( panel );
|
||||||
}
|
}
|
||||||
$( a ).attr( "aria-controls", selector );
|
$( a ).attr( "aria-controls", selector.substring( 1 ) );
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -348,8 +348,8 @@ $.widget( "ui.tabs", {
|
|||||||
clicked = $( event.currentTarget ),
|
clicked = $( event.currentTarget ),
|
||||||
clickedIsActive = clicked[ 0 ] === active[ 0 ],
|
clickedIsActive = clicked[ 0 ] === active[ 0 ],
|
||||||
collapsing = clickedIsActive && options.collapsible,
|
collapsing = clickedIsActive && options.collapsible,
|
||||||
toShow = collapsing ? $() : that.element.find( that._sanitizeSelector( clicked.attr( "aria-controls" ) ) ),
|
toShow = collapsing ? $() : that._getPanelForTab( clicked ),
|
||||||
toHide = !active.length ? $() : that.element.find( that._sanitizeSelector( active.attr( "aria-controls" ) ) ),
|
toHide = !active.length ? $() : that._getPanelForTab( active ),
|
||||||
tab = clicked.closest( "li" ),
|
tab = clicked.closest( "li" ),
|
||||||
eventData = {
|
eventData = {
|
||||||
oldTab: active,
|
oldTab: active,
|
||||||
@ -397,7 +397,7 @@ $.widget( "ui.tabs", {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171
|
// TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171
|
||||||
that.load( that.anchors.index( clicked ) );
|
that.load( that.anchors.index( clicked ), event );
|
||||||
|
|
||||||
clicked[ 0 ].blur();
|
clicked[ 0 ].blur();
|
||||||
return;
|
return;
|
||||||
@ -415,7 +415,7 @@ $.widget( "ui.tabs", {
|
|||||||
that._showTab( event, eventData );
|
that._showTab( event, eventData );
|
||||||
});
|
});
|
||||||
|
|
||||||
that.load( that.anchors.index( clicked ) );
|
that.load( that.anchors.index( clicked ), event );
|
||||||
} else {
|
} else {
|
||||||
throw "jQuery UI Tabs: Mismatching fragment identifier.";
|
throw "jQuery UI Tabs: Mismatching fragment identifier.";
|
||||||
}
|
}
|
||||||
@ -550,16 +550,19 @@ $.widget( "ui.tabs", {
|
|||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
load: function( index ) {
|
load: function( index, event ) {
|
||||||
index = this._getIndex( index );
|
index = this._getIndex( index );
|
||||||
var self = this,
|
var self = this,
|
||||||
o = this.options,
|
o = this.options,
|
||||||
a = this.anchors.eq( index )[ 0 ],
|
a = this.anchors.eq( index )[ 0 ],
|
||||||
panel = self.element.find( self._sanitizeSelector( $( a ).attr( "aria-controls" ) ) ),
|
panel = self._getPanelForTab( a ),
|
||||||
// TODO until #3808 is fixed strip fragment identifier from url
|
// TODO until #3808 is fixed strip fragment identifier from url
|
||||||
// (IE fails to load from such url)
|
// (IE fails to load from such url)
|
||||||
url = $( a ).attr( "href" ).replace( /#.*$/, "" ),
|
url = $( a ).attr( "href" ).replace( /#.*$/, "" ),
|
||||||
eventData = self._ui( a, panel[ 0 ] );
|
eventData = {
|
||||||
|
tab: $( a ),
|
||||||
|
panel: panel
|
||||||
|
};
|
||||||
|
|
||||||
if ( this.xhr ) {
|
if ( this.xhr ) {
|
||||||
this.xhr.abort();
|
this.xhr.abort();
|
||||||
@ -574,9 +577,8 @@ $.widget( "ui.tabs", {
|
|||||||
this.xhr = $.ajax({
|
this.xhr = $.ajax({
|
||||||
url: url,
|
url: url,
|
||||||
beforeSend: function( jqXHR, settings ) {
|
beforeSend: function( jqXHR, settings ) {
|
||||||
// TODO: pass relevant event
|
return self._trigger( "beforeLoad", event,
|
||||||
return self._trigger( "beforeLoad", null,
|
$.extend( { jqXHR : jqXHR, ajaxSettings: settings }, eventData ) );
|
||||||
$.extend( { jqXHR : jqXHR, settings: settings }, eventData ) );
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -585,10 +587,10 @@ $.widget( "ui.tabs", {
|
|||||||
this.lis.eq( index ).addClass( "ui-tabs-loading" );
|
this.lis.eq( index ).addClass( "ui-tabs-loading" );
|
||||||
|
|
||||||
this.xhr
|
this.xhr
|
||||||
.success( function( response ) {
|
.success(function( response ) {
|
||||||
panel.html( response );
|
panel.html( response );
|
||||||
})
|
})
|
||||||
.complete( function( jqXHR, status ) {
|
.complete(function( jqXHR, status ) {
|
||||||
if ( status === "abort" ) {
|
if ( status === "abort" ) {
|
||||||
// stop possibly running animations
|
// stop possibly running animations
|
||||||
self.element.queue( [] );
|
self.element.queue( [] );
|
||||||
@ -603,7 +605,7 @@ $.widget( "ui.tabs", {
|
|||||||
|
|
||||||
self.lis.eq( index ).removeClass( "ui-tabs-loading" );
|
self.lis.eq( index ).removeClass( "ui-tabs-loading" );
|
||||||
|
|
||||||
self._trigger( "load", null, eventData );
|
self._trigger( "load", event, eventData );
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -645,19 +647,19 @@ if ( $.uiBackCompat !== false ) {
|
|||||||
|
|
||||||
this.element.bind( "tabsbeforeload", function( event, ui ) {
|
this.element.bind( "tabsbeforeload", function( event, ui ) {
|
||||||
// tab is already cached
|
// tab is already cached
|
||||||
if ( $.data( ui.tab, "cache.tabs" ) ) {
|
if ( $.data( ui.tab[ 0 ], "cache.tabs" ) ) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
$.extend( ui.settings, self.options.ajaxOptions, {
|
$.extend( ui.ajaxSettings, self.options.ajaxOptions, {
|
||||||
error: function( xhr, s, e ) {
|
error: function( xhr, s, e ) {
|
||||||
try {
|
try {
|
||||||
// Passing index avoid a race condition when this method is
|
// Passing index avoid a race condition when this method is
|
||||||
// called after the user has selected another tab.
|
// called after the user has selected another tab.
|
||||||
// Pass the anchor that initiated this request allows
|
// Pass the anchor that initiated this request allows
|
||||||
// loadError to manipulate the tab content panel via $(a.hash)
|
// loadError to manipulate the tab content panel via $(a.hash)
|
||||||
self.options.ajaxOptions.error( xhr, s, ui.index, ui.tab );
|
self.options.ajaxOptions.error( xhr, s, ui.tab.closest( "li" ).index(), ui.tab[ 0 ] );
|
||||||
}
|
}
|
||||||
catch ( e ) {}
|
catch ( e ) {}
|
||||||
}
|
}
|
||||||
@ -665,7 +667,7 @@ if ( $.uiBackCompat !== false ) {
|
|||||||
|
|
||||||
ui.jqXHR.success( function() {
|
ui.jqXHR.success( function() {
|
||||||
if ( self.options.cache ) {
|
if ( self.options.cache ) {
|
||||||
$.data( ui.tab, "cache.tabs", true );
|
$.data( ui.tab[ 0 ], "cache.tabs", true );
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -876,7 +878,7 @@ if ( $.uiBackCompat !== false ) {
|
|||||||
|
|
||||||
var _tabId = prototype._tabId;
|
var _tabId = prototype._tabId;
|
||||||
prototype._tabId = function( a ) {
|
prototype._tabId = function( a ) {
|
||||||
return ( $( a ).attr( "aria-controls" ) || "" ).replace( /^#/ , "" ) ||
|
return ( $( a ).attr( "aria-controls" ) || "" ) ||
|
||||||
a.title && a.title.replace( /\s/g, "_" ).replace( /[^\w\u00c0-\uFFFF-]/g, "" ) ||
|
a.title && a.title.replace( /\s/g, "_" ).replace( /[^\w\u00c0-\uFFFF-]/g, "" ) ||
|
||||||
this.options.idPrefix + getNextTabId();
|
this.options.idPrefix + getNextTabId();
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user