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

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -