CODEWITHSUNDEEP
javascriptjqueryajaxasp.net-mvctwitter-bootstrap
Rabia
Rabia

Reputation: 47

Bootstrap Ajax Tabs Not Preloading

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');
    });
    });

Upvotes: 0

Views: 521

Answers (1)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

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();

Upvotes: 1

Related Questions