Bootstrap Ajax Tabs Not Preloading

By : Rabia
Source: Stackoverflow.com
Question!

I am using Bootstrap Tabs and loading them with Jquery in a Asp.net MVC5 web app. But Tab 1 (30days) is not loading on page load. I have rechecked the code many times but couldn't find out the issue. Can you guys please take a look on this where I am doing wrong. Thanks

HTML

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Hot Stories</h3>
                <span class="pull-right">
                    <!-- Tabs -->
                    <ul class="nav panel-tabs" id="HotStoriesTabs">
                        <li class="active"><a href="#30Day" data-toggle="tab" data-url="/HotStories30Days">30 days</a></li>
                        <li><a href="#14Day" data-toggle="tab" data-url="/HotStories14Days">14 days</a></li>
                        <li><a href="#7Day" data-toggle="tab" data-url="/HotStories7Days">7 days</a></li>
                    </ul>
                </span>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane active" id="30Day"><i class="fa fa-spinner fa-2x fa-pulse"></i></div>
                    <div class="tab-pane" id="14Day"><i class="fa fa-spinner fa-2x fa-pulse"></i></div>
                    <div class="tab-pane" id="7Day"><i class="fa fa-spinner fa-2x fa-pulse"></i></div>
                </div>
            </div>
        </div>

Javascript

$(document).ready(function () {
    $('#HotStoriesTabs a').click(function (e) {
        e.preventDefault();
        var url = $(this).attr("data-url");
        var href = this.hash;
        var pane = $(this);
        $(href).load(url, function (result) {
            pane.tab('show');
        });
    });

    // tab to load on page load
    $('#30Day').load($('.active a').attr("data-url"), function (result) {
        $('.active a').tab('show');
    });
    });
By : Rabia


Answers

As it is the first anchor tag which is for 30 Days, you can use first() function to get first tag after registering click event and using click() or trigger('click') to call click on it programmatically :

 $('#HotStoriesTabs a').click(function (e) {
    e.preventDefault();
    var url = $(this).attr("data-url");
    var href = this.hash;
    var pane = $(this);
    $(href).load(url, function (result) {
        pane.tab('show');
    });
}).first().click();


This video can help you solving your question :)
By: admin