Skip to content

Commit ff84d58

Browse files
committed
Tabs: Pass appropriate data for beforeLoad event. Partial fix for #7131 - Tabs: Add beforeload event; deprecate ajaxOptions and cache options.
1 parent 995518c commit ff84d58

File tree

4 files changed

+77
-39
lines changed

4 files changed

+77
-39
lines changed

tests/unit/tabs/tabs_deprecated.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ test( "#4581 - title attribute for remote tabs does not support foreign language
99
selected: 3,
1010
beforeLoad: function( event, ui ) {
1111
event.preventDefault();
12-
equal( ui.panel.id, "∫ßáö_Սե", "proper title" );
12+
equal( ui.panel.attr( "id" ), "∫ßáö_Սե", "proper title" );
1313
}
1414
});
1515
});

tests/unit/tabs/tabs_events.js

Lines changed: 50 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -140,21 +140,57 @@ test( "activate", function() {
140140
});
141141

142142
test( "beforeLoad", function() {
143-
expect( 5 );
144-
145-
el = $( "#tabs2" );
146-
147-
el.tabs({
148-
active: 2,
149-
beforeLoad: function( event, ui ) {
150-
ok( $.isFunction( ui.jqXHR.promise ), 'contain jqXHR object');
151-
equals( ui.settings.url, "data/test.html", 'contain ajax settings url');
152-
equals( ui.tab, el.find('a')[ 2 ], 'contain tab as DOM anchor element');
153-
equals( ui.panel, el.find('div')[ 2 ], 'contain panel as DOM div element');
154-
equals( ui.index, 2, 'contain index');
155-
event.preventDefault();
156-
}
143+
expect( 21 );
144+
145+
var tab, panelId, panel,
146+
element = $( "#tabs2" ).tabs();
147+
148+
// TODO: init
149+
// element.one( "tabsbeforeload", function( event, ui ) {
150+
// });
151+
// element.tabs({ active: 2 });
152+
153+
// .option()
154+
element.one( "tabsbeforeload", function( event, ui ) {
155+
tab = element.find( ".ui-tabs-nav a" ).eq( 2 );
156+
panelId = tab.attr( "aria-controls" );
157+
panel = $( "#" + panelId );
158+
159+
ok( !( "originalEvent" in event ), "originalEvent" );
160+
ok( "abort" in ui.jqXHR, "jqXHR" );
161+
ok( ui.ajaxSettings.url, "data/test.html", "ajaxSettings.url" );
162+
equals( ui.tab.size(), 1, "tab size" );
163+
strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" );
164+
equals( ui.panel.size(), 1, "panel size" );
165+
strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" );
166+
equals( ui.panel.html(), "", "panel html" );
167+
event.preventDefault();
168+
tabs_state( element, 1, 0, 0, 0 );
169+
});
170+
element.tabs( "option", "active", 2 );
171+
tabs_state( element, 0, 0, 1, 0 );
172+
equals( panel.html(), "", "panel html after" );
173+
174+
// click
175+
element.one( "tabsbeforeload", function( event, ui ) {
176+
tab = element.find( ".ui-tabs-nav a" ).eq( 3 );
177+
panelId = tab.attr( "aria-controls" );
178+
panel = $( "#" + panelId );
179+
180+
equals( event.originalEvent.type, "click", "originalEvent" );
181+
ok( "abort" in ui.jqXHR, "jqXHR" );
182+
ok( ui.ajaxSettings.url, "data/test.html", "ajaxSettings.url" );
183+
equals( ui.tab.size(), 1, "tab size" );
184+
strictEqual( ui.tab[ 0 ], tab[ 0 ], "tab" );
185+
equals( ui.panel.size(), 1, "panel size" );
186+
strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" );
187+
ui.panel.html( "<p>testing</p>" );
188+
event.preventDefault();
189+
tabs_state( element, 0, 0, 1, 0 );
157190
});
191+
element.find( ".ui-tabs-nav a" ).eq( 3 ).click();
192+
tabs_state( element, 0, 0, 0, 1 );
193+
equals( panel.html(), "<p>testing</p>", "panel html after" );
158194
});
159195

160196
test('load', function() {

tests/unit/tabs/tabs_tickets.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ test('#3627 - Ajax tab with url containing a fragment identifier fails to load',
4646
active: 2,
4747
beforeLoad: function( event, ui ) {
4848
event.preventDefault();
49-
ok(/test.html$/.test( ui.settings.url ), 'should ignore fragment identifier');
49+
ok(/test.html$/.test( ui.ajaxSettings.url ), 'should ignore fragment identifier');
5050
}
5151
});
5252
});
@@ -64,7 +64,7 @@ test('#4033 - IE expands hash to full url and misinterprets tab as ajax', functi
6464
}
6565
});
6666

67-
equals($('a', el).attr('aria-controls'), '#tab', 'aria-contorls attribute is correct');
67+
equals($('a', el).attr('aria-controls'), 'tab', 'aria-contorls attribute is correct');
6868
});
6969

7070
test('#5893 - Sublist in the tab list are considered as tab', function() {

ui/jquery.ui.tabs.js

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ $.widget( "ui.tabs", {
9393
// check for length avoids error when initializing empty list
9494
if ( o.active >= 0 && this.anchors.length ) {
9595
this.active = this._findActive( o.active );
96-
var panel = self.element.find( self._sanitizeSelector( this.active.attr( "aria-controls" ) ) );
96+
var panel = self._getPanelForTab( this.active );
9797

9898
panel.show();
9999

@@ -129,7 +129,7 @@ $.widget( "ui.tabs", {
129129
},
130130

131131
_tabId: function( a ) {
132-
return ( $( a ).attr( "aria-controls" ) || "" ).replace( /^#/ , "" ) ||
132+
return ( $( a ).attr( "aria-controls" ) || "" ) ||
133133
"ui-tabs-" + getNextTabId();
134134
},
135135

@@ -155,7 +155,7 @@ $.widget( "ui.tabs", {
155155

156156
// Remove panels that we created that are missing their tab
157157
this.element.find(".ui-tabs-panel:data(destroy.tabs)").each( function( index, panel ) {
158-
var anchor = self.anchors.filter( "[aria-controls='#" + panel.id + "']");
158+
var anchor = self.anchors.filter( "[aria-controls='" + panel.id + "']");
159159
if ( !anchor.length ) {
160160
$( panel ).remove();
161161
}
@@ -248,7 +248,7 @@ $.widget( "ui.tabs", {
248248
if ( panel.length) {
249249
self.panels = self.panels.add( panel );
250250
}
251-
$( a ).attr( "aria-controls", selector );
251+
$( a ).attr( "aria-controls", selector.substring( 1 ) );
252252
});
253253
},
254254

@@ -348,8 +348,8 @@ $.widget( "ui.tabs", {
348348
clicked = $( event.currentTarget ),
349349
clickedIsActive = clicked[ 0 ] === active[ 0 ],
350350
collapsing = clickedIsActive && options.collapsible,
351-
toShow = collapsing ? $() : that.element.find( that._sanitizeSelector( clicked.attr( "aria-controls" ) ) ),
352-
toHide = !active.length ? $() : that.element.find( that._sanitizeSelector( active.attr( "aria-controls" ) ) ),
351+
toShow = collapsing ? $() : that._getPanelForTab( clicked ),
352+
toHide = !active.length ? $() : that._getPanelForTab( active ),
353353
tab = clicked.closest( "li" ),
354354
eventData = {
355355
oldTab: active,
@@ -397,7 +397,7 @@ $.widget( "ui.tabs", {
397397
});
398398

399399
// TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171
400-
that.load( that.anchors.index( clicked ) );
400+
that.load( that.anchors.index( clicked ), event );
401401

402402
clicked[ 0 ].blur();
403403
return;
@@ -415,7 +415,7 @@ $.widget( "ui.tabs", {
415415
that._showTab( event, eventData );
416416
});
417417

418-
that.load( that.anchors.index( clicked ) );
418+
that.load( that.anchors.index( clicked ), event );
419419
} else {
420420
throw "jQuery UI Tabs: Mismatching fragment identifier.";
421421
}
@@ -550,16 +550,19 @@ $.widget( "ui.tabs", {
550550
return this;
551551
},
552552

553-
load: function( index ) {
553+
load: function( index, event ) {
554554
index = this._getIndex( index );
555555
var self = this,
556556
o = this.options,
557557
a = this.anchors.eq( index )[ 0 ],
558-
panel = self.element.find( self._sanitizeSelector( $( a ).attr( "aria-controls" ) ) ),
558+
panel = self._getPanelForTab( a ),
559559
// TODO until #3808 is fixed strip fragment identifier from url
560560
// (IE fails to load from such url)
561561
url = $( a ).attr( "href" ).replace( /#.*$/, "" ),
562-
eventData = self._ui( a, panel[ 0 ] );
562+
eventData = {
563+
tab: $( a ),
564+
panel: panel
565+
};
563566

564567
if ( this.xhr ) {
565568
this.xhr.abort();
@@ -574,9 +577,8 @@ $.widget( "ui.tabs", {
574577
this.xhr = $.ajax({
575578
url: url,
576579
beforeSend: function( jqXHR, settings ) {
577-
// TODO: pass relevant event
578-
return self._trigger( "beforeLoad", null,
579-
$.extend( { jqXHR : jqXHR, settings: settings }, eventData ) );
580+
return self._trigger( "beforeLoad", event,
581+
$.extend( { jqXHR : jqXHR, ajaxSettings: settings }, eventData ) );
580582
}
581583
});
582584

@@ -585,10 +587,10 @@ $.widget( "ui.tabs", {
585587
this.lis.eq( index ).addClass( "ui-tabs-loading" );
586588

587589
this.xhr
588-
.success( function( response ) {
590+
.success(function( response ) {
589591
panel.html( response );
590592
})
591-
.complete( function( jqXHR, status ) {
593+
.complete(function( jqXHR, status ) {
592594
if ( status === "abort" ) {
593595
// stop possibly running animations
594596
self.element.queue( [] );
@@ -603,7 +605,7 @@ $.widget( "ui.tabs", {
603605

604606
self.lis.eq( index ).removeClass( "ui-tabs-loading" );
605607

606-
self._trigger( "load", null, eventData );
608+
self._trigger( "load", event, eventData );
607609
});
608610
}
609611

@@ -645,27 +647,27 @@ if ( $.uiBackCompat !== false ) {
645647

646648
this.element.bind( "tabsbeforeload", function( event, ui ) {
647649
// tab is already cached
648-
if ( $.data( ui.tab, "cache.tabs" ) ) {
650+
if ( $.data( ui.tab[ 0 ], "cache.tabs" ) ) {
649651
event.preventDefault();
650652
return;
651653
}
652654

653-
$.extend( ui.settings, self.options.ajaxOptions, {
655+
$.extend( ui.ajaxSettings, self.options.ajaxOptions, {
654656
error: function( xhr, s, e ) {
655657
try {
656658
// Passing index avoid a race condition when this method is
657659
// called after the user has selected another tab.
658660
// Pass the anchor that initiated this request allows
659661
// loadError to manipulate the tab content panel via $(a.hash)
660-
self.options.ajaxOptions.error( xhr, s, ui.index, ui.tab );
662+
self.options.ajaxOptions.error( xhr, s, ui.tab.closest( "li" ).index(), ui.tab[ 0 ] );
661663
}
662664
catch ( e ) {}
663665
}
664666
});
665667

666668
ui.jqXHR.success( function() {
667669
if ( self.options.cache ) {
668-
$.data( ui.tab, "cache.tabs", true );
670+
$.data( ui.tab[ 0 ], "cache.tabs", true );
669671
}
670672
});
671673
});
@@ -876,7 +878,7 @@ if ( $.uiBackCompat !== false ) {
876878

877879
var _tabId = prototype._tabId;
878880
prototype._tabId = function( a ) {
879-
return ( $( a ).attr( "aria-controls" ) || "" ).replace( /^#/ , "" ) ||
881+
return ( $( a ).attr( "aria-controls" ) || "" ) ||
880882
a.title && a.title.replace( /\s/g, "_" ).replace( /[^\w\u00c0-\uFFFF-]/g, "" ) ||
881883
this.options.idPrefix + getNextTabId();
882884
};

0 commit comments

Comments
 (0)