jQuery UI Tabs get script on tab click and page refresh

Question

Testing UI tabs for first time for a personal project. Included what i have so far. I need to load 2 separate script which creates a div when i click Tab 2 and Tab 3. I was doing this before using jQuery getScript when i had an onclick function for some links. Can this be done is similar fashion using UI Tabs ? If so , how ?

<li><a onclick="loadTabtwo()">Tab 2</a></li>
<li><a onclick="loadTabthree()">Tab 3</a></li>

function loadTabtwo() {
     $.getScript("//tab2.js");
}
function loadTabthree() {
     $.getScript("//tab3.js");
}

Here is my function to activate tabs and to have current tab reload of page refresh.

jQuery(function($) {
    var index = 'qpsstats-active-tab';
    var dataStore = window.sessionStorage;
    var oldIndex = 0;
    try {
        oldIndex = dataStore.getItem(index);
    } catch(e) {} 
    $( "#tabs" ).tabs({
        active: oldIndex,
        activate: function(event, ui) {
            var newIndex = ui.newTab.parent().children().index(ui.newTab);
            try {
                dataStore.setItem( index, newIndex );
            } catch(e) {}
        }
    });
});

Here is HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>

  <div id="tabs-1">
    <p>Tab 1 Content Here</p>
  </div>
  <div id="tabs-2">
    Load Script 2 Here - loadTabtwo()
  </div>
  <div id="tabs-3">
    Load Script 3 Here - loadTabthree()
  </div>
</div>

Fadi Abo Msalam · Accepted Answer · 2017-05-03 13:03:46Z

1

I believe this is what you want but i don't think what you already have is the best practice since each time you are gonna click on the tab it will get the script again

$( "#tabs" ).tabs({
    active: oldIndex,
    activate: function(event, ui) {
        // ui.newTab.index() gets the index of which tab is active
        //watch the index start from 0
        if(ui.newTab.index()==1){
             $.getScript("//tab2.js");
        }
        else if(ui.newTab.index()==1){
            $.getScript("//tab3.js");
        }

        var newIndex = ui.newTab.parent().children().index(ui.newTab);
        try {
            dataStore.setItem( index, newIndex );
        } catch(e) {}
    }
});

answered May 3, 2017 at 13:03

Fadi Abo Msalam

7,2952 gold badges24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

MShack Over a year ago

Fadi , you are correct. I'd rather not have all the scripts running at one time if a user clicks on every tab. Is there a way to getScript for current tab and disable all others ? So basically load and unload the script on tab click ?

Fadi Abo Msalam Over a year ago

there is a way but I don't believe if you do that it will be best practice can you tell what you are trying to achieve ?? why is the script need to load in certain page only ? whats the problem of loading them once instead of each time adding a script and remove a script - which is a time consuming for no reason

MShack Over a year ago

On page refresh , the current tab loads , but the script doesn't refire , anyway to combine .load and getScript , so on page refresh the current tab script is loaded ?

Fadi Abo Msalam Over a year ago

how about to call this function $.getScript('//tab'+$('#tabs').tabs( "option", "active" );+'.js') on load of page

Fadi Abo Msalam Over a year ago

$('#tabs').tabs( "option", "active" ); returns index of active page even after refresh i guess thats what you need right ?

|

Collectives™ on Stack Overflow

jQuery UI Tabs get script on tab click and page refresh

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related