Dealing with lazy loading tabs when different tab initially selected through url #

Question

I'm adapting a site with several content heavy tabs so that they lazily load when or if they're first clicked. To do this, I've written the following jquery:

$(document).ready(function(){
  $("#aa,#bb,#cc,#dd,#ee").bind("click", function() {
    target = $(this).data('target');
    section = $(this).data('section');
    if ($("#"+target).html() == "Loading") {
        urlstring = "mysite.com/item-tab.html?item=666&tabType="+section;
        $.ajax({ url: urlstring }).done(
            function(msg){ 
                $("#"+target).html(msg)
            });   
    }
  });
});

in the HTML I have:

<ul class="nav nav-pills nav-justified hidden-print">
    <li class="first-tab active" id="aa" data-target="specContent" data-section="spec"><a href="#a" data-toggle="pill">Specification</a></li>
    <li id="bb" data-target="vidContent" data-section="videos"><a href="#b" data-toggle="pill">Videos</a></li>
    <!-- a bunch more like this --> 
</ul>

<div class="tab-content">
    <div  class="tab-pane fade active in" id="a">
        <h2>Product Specification</h2>
            <div id="specContent">Loading</div>
    </div> 

    <div  class="tab-pane fade" id="b">
        <h2>Product Videos</h2>
        <div id="vidContent">Loading</div>
    </div>
    <!-- a bunch more of these too -->
</div>

Now I've hit a wall. Normally the first tag will be open on page load but occasionally it'll be the second, done through the URL having #bb at the end.

How can I pick up on this and load the second tab's content at the start? Is there an event triggered that I can check for when the second tab is activated through #bb in the URL?

My other possible direction was to access the URL and split on # to extract bb, loading the second tab if I found it but searching SO on this seemed to suggest I'd be opening my script up to potential security risks by doing that.

I should add that if it was always the first tab open at the start, I wouldn't have included #aa in the jquery and would have put the real content, not "Loading" into the div id="specContent"

Thanks for any recommendations, suggestions or pointers.

score 1 · Accepted Answer · answered Feb 08 '17 at 10:15

Well, I've gone with the split the URL on # option so am answering my own question here. I made a new loadTab function and set the onClick part to point to that, then called it if there was a '#' in the URL that matched an element in my page, calling the data-target and data-section attributes. Seems to work.

function loadTab(target, section) {
    if ($("#"+target).html() == "Loading") {
        urlstring = "mysite.com/item-tab.html?item=666&tabType="+section;
        $.ajax({ url: urlstring }).done(function(msg){ 
            $("#"+target).html(msg)
        });    
    }
}

if(window.location.href.indexOf('#') > -1) {
    elem = $(window.location.href.substring(window.location.href.indexOf('#')));
    if (elem.length) {
        target = elem.attr('data-target');
        section = elem.attr('data-section');
        loadTab(target, section);
    } 
} else {
    loadTab('specContent', 'spec');
}

$("#aa,#bb,#cc,#dd,#ee").bind("click", function() {
    loadTab($(this).data('target'), $(this).data('section'));
});

SO etiquette question, comments only please. Is there any issue with posting a question then solving it yourself inside 24 hours?

Dealing with lazy loading tabs when different tab initially selected through url #

1 Answers1