javascript - Bootstrap Remote tabs - load first tab -
i'm using bootstrap-remote-data library load data remotely since have load alot of data every tab.
my problem whenever page loaded, first tab not loaded when page does; need click tab , first tab in order load first tab.
the above library contains feature of "loadfirsttab:" variable can set true or false, no matter if variable true or false - never loads first tab.
been trying play js class , html several hours , couldn't make work , load first tab.
this how html looks like:
<li class="active"><a data-toggle="tab" href="#tab1" data-tab-url="tab1.php">tab 1 - never loaded on page load!</a></li> <li><a data-toggle="tab" href="#tab2" data-tab-url="tab2.php">">tab2</a></li> <li><a data-toggle="tab" href="#tab3">tab 3</a></li> <li><a data-toggle="tab" href="#tab4">tab 4</a></li> <div class="tab-content well"> <div id="tab1" class="tab-pane fade in active" style="min-height:300px"> <h3>loading data, please wait..</h3> </div> <div id="tab2" class="tab-pane fade in" style="min-height:300px"> <h3>loading data, please wait..</h3> </div> <div id="tab3 class="tab-pane fade in" style="min-height:300px"> <h3>data tab 3</h3> </div> <div id="tab4" class="tab-pane fade in" style="min-height:300px"> <h3>data tab 4</h3> </div> the js class:
var $ = jquery; /*! * * bootstrap remote data tabs plugin * version 1.2.0 * * author: stephen hoogendijk (thecodeassassin) * * licensed under gplv2 license. * * @returns {{hasloadingmask: boolean, load: function, _executeremotecall: function}} * @constructor */ var bootstrapremotetabsettings = { customloadfn: function(isloading) { var loader = $('.custom-loader'); if (isloading) { loader.show(); } else { loader.hide(); } }, loadfirsttab: true } var hasloadingmask = (jquery().mask ? true : false), bootstrapversion2 = (jquery().typeahead ? true : false), // hook event based on version of bootstrap tabshowevent = (bootstrapversion2 ? 'show' : 'show.bs.tab'), accordionshowevent = (bootstrapversion2 ? 'show' : 'show.bs.collapse'), defaultsettings = { customloadfn: null, loadfirsttab: true }, customsettings = $.extend({}, defaultsettings); if (typeof bootstrapremotetabsettings != 'undefined') { customsettings = $.extend({}, bootstrapremotetabsettings); } $(function () { // try navigate tab/accordion last given in url var hash = document.location.hash, firsttab; if (hash) { var realhash = hash.split('bs-tab-')[1], hastab = $('[data-toggle=tab][href*=' + realhash + ']'); if (hastab) { hastab.click(); } var hasaccordion = $('[data-toggle=collapse][href=' + hash + ']'); if (hasaccordion) { // reason cannot execute 'show' event accordion properly, here's workaround if (hasaccordion[0] != $('[data-toggle=collapse]:first')[0]) { hasaccordion.click(); } } } firsttab = $('[data-toggle=tab]:first, [data-toggle=collapse]:first'); if (!customsettings.loadfirsttab && !hastab) { firsttab.click(); } }); var remotetabs = function (settings) { var obj = { hasloadingmask: false, settings: settings, customloadfn: settings.customloadfn, /** * * @param tabevent * @param hasloadingmask */ load: function (hasloadingmask) { var me = this; me.hasloadingmask = !!hasloadingmask; // enable remote data tabs $('[data-toggle=tab], [data-toggle=collapse]').each(function (k, obj) { var bsobj = $(obj), bsdiv, bsdata, bscallback, url, simulatedelay, alwaysrefresh, hasopenpanel = false, originalobj, showevent, hash; if (typeof bsobj != 'undefined') { if (bsobj.attr('href')) { hash = bsobj.attr('href').split('#')[1]; // prevent default hash actions bsobj.on('click', function (e) { $(this).tab('show'); window.location.hash = 'bs-tab-'+hash; e.preventdefault(); }); // check if tab has data-url property if (bsobj.is('[data-tab-url]')) { url = bsobj.attr('data-tab-url'); bsdiv = $('#' + hash); bsdata = bsobj.attr('data-tab-json') || []; bscallback = bsobj.attr('data-tab-callback') || null; simulatedelay = bsobj.attr('data-tab-delay') || null; alwaysrefresh = (bsobj.is('[data-tab-always-refresh]') && bsobj.attr('data-tab-always-refresh') == 'true') || null; originalobj = bsobj; showevent = (bsobj.attr('data-toggle') == 'tab' ? tabshowevent : accordionshowevent); if (bsdata.length > 0) { try { bsdata = $.parsejson(bsdata); } catch (exc) { console.log('invalid json passed data-tab-json'); console.log(exc); } } if (showevent == accordionshowevent) { hasopenpanel = bsdiv.hasclass('in'); // when accordion triggered, make div triggered object instead of link if (bootstrapversion2) { bsobj = bsobj.parent(); } else { bsobj = bsobj.parents('.panel'); } // if there panel opened, make sure data url fetched if (hasopenpanel) { me._triggerchange(null, url, bsdata, bscallback, bsobj, bsdiv, simulatedelay, alwaysrefresh, originalobj); } } bsobj.on(showevent, function (e) { me._triggerchange(e, url, bsdata, bscallback, bsobj, bsdiv, simulatedelay, alwaysrefresh, originalobj); }); } } } }); }, /** * trigger change * * @param e * @param url * @param bsdata * @param bscallback * @param bsobj * @param bsdiv * @param simulatedelay * @param alwaysrefresh * @param originalobj */ _triggerchange: function (e, url, bsdata, bscallback, bsobj, bsdiv, simulatedelay, alwaysrefresh, originalobj) { var me = this; // change hash of location if (e) { if (typeof e.target.hash != 'undefined') { window.location.hash = e.target.hash; } else { window.location.hash = originalobj.prop('hash'); } } if ((!bsobj.hasclass("loaded") || alwaysrefresh) && !bsobj.hasclass('loading')) { if (me.customloadfn) { me.customloadfn(me, true, bsdiv); } if (me.hasloadingmask && !me.settings.custom) { bsdiv.mask('loading...'); } bsobj.addclass('loading'); // delay json call if has been given value if (simulatedelay) { cleartimeout(window.timer); window.timer = settimeout(function () { me._executeremotecall(url, bsdata, bscallback, bsobj, bsdiv); }, simulatedelay); } else { me._executeremotecall(url, bsdata, bscallback, bsobj, bsdiv); } } }, /** * execute remote call * @param url * @param customdata * @param callbackfn * @param trigger * @param datacontainer * @private */ _executeremotecall: function (url, customdata, callbackfn, trigger, datacontainer) { var me = this; $.ajax({ url: url, data: customdata || [], success: function (data) { trigger.removeclass('loading'); if (me.customloadfn) { me.customloadfn(me, false, datacontainer); } if (me.hasloadingmask) { datacontainer.unmask(); } if (data) { if (typeof window[callbackfn] == 'function') { window[callbackfn].call(null, data, trigger, datacontainer, customdata); } if (!trigger.hasclass("loaded")) { trigger.addclass("loaded"); } datacontainer.html(data); } }, error: function (data, status, error) { datacontainer.html("an error occured while loading data: " + error); trigger.removeclass('loading'); if (me.customloadfn) { me.customloadfn(me, false, datacontainer); } if (me.hasloadingmask) { datacontainer.unmask(); } } }); } }; obj.load(hasloadingmask); return obj; }; var remotetabspluginloaded = new remotetabs(customsettings);
i made work around this, replaced this:
if (!customsettings.loadfirsttab && !hastab) { firsttab.click(); } with this:
if (customsettings.loadfirsttab && hastab) { $(firsttab.attr('href')).load(firsttab.attr('data-tab-url')); } in: bootstrap-remote-tabs.js
it seems doing job , loading first tab, still, doesn't feel right doesn't take account other things plugin doing such load masking...
Comments
Post a Comment