Getting the id of the selected Tab pane and dynamically updating the contents of the pane

[caw]

I have an application which in JS gets the id of the selected Tab pane - and then I can update the contents of the pane

Simple example:
https://stackoverflow.com/questions/20705905/bootstrap-3-jquery-event-for-active-tab-change

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  alert(target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li class=""><a href="#profile" data-toggle="tab">Profile</a></li> 
</ul>  
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade active in" id="home">
    home tab!
  </div>
  <div class="tab-pane fade" id="profile">
    profile tab!
  </div>
</div>

Solution in JS (loads content via AJAX)
http://ericsaupe.com/tag/bootstrap-3-tabs-example-ajax/
It would be very useful to have this in elm-bootstrap

[rundis]

I can see how an Elm alternative to this would be useful. How would this fit with tab animations though, when should the animation start and end ?

[rundis]

Seems related to #59. (Get a notification/message back when tab is changed). You'd probably also want some state in your model to show something temporarily while the ajax request is running.
Its not super difficult to implement, but a little challenge to not make it less nice for people to use who don't need the msg/event.

Design ideas are welcome !

[shobana1234]

Hi Anybody refers good link for reference ..I want CRUD operation inside the Tab using laravel and Ajax Dynamically. Tq

[bikify]

still waiting for solution, anybody solved this ?

[Khan291]

@*

*@

• Beneficiary Details
• Site Engineer
• Project Engineer
• City Engineer
• Chief Officer
• Accountant

@*

*@

$(document).ready(function () {

    $('#custtab a[data-toggle="tab"]').bind('click', function (e) {
        debugger;
        e.preventDefault();
        var tab = $(this).attr("href");
        var url = '';
        switch (tab) {
            case '#tabdataEngineer':
                url = '@Url.Action("DataEntry", "WorkFlow")'
                break;
            case '#tabSiteEngineer':
                url = '@Url.Action("SiteEngineer", "WorkFlow")'
                break;
            case '#tabProjectEngineer':
                url = '@Url.Action("ProjectEngineer", "WorkFlow")'
                break;
            case '#tabCityEngineer':
                url = '@Url.Action("CityEngineer", "WorkFlow")'
                break;
            case '#tabchiefOfficer':
                url = '@Url.Action("ChiefOfficer", "WorkFlow")'
                break;
            case '#tabAccountant':
                url = '@Url.Action("Accountant", "WorkFlow")'
                break;
            default:
        }

        if (typeof url !== "undefined") {
            var pane = $(this);

            $.ajax({
                url: url,
                type: 'GET',
                cache: false,
                // data: { meter_id: meterId }
            }).done(function (result) {
               $(tab).html(result);
                pane.tab('show');
            });              
        } else {
            $(this).tab('show');
        }
    });

});

[Khan291]

<div class="row">
            <div class="col-md-12 col-xs-12">
                @*<div class="panel with-nav-tabs panel-primary">*@
                    <div class="nav-tabs-custom" id="custtab">
                        <ul class="nav nav-tabs">
                            <li id="li_dataeng"><a href="#tabdataEngineer" class="nav_link" data-toggle="tab">Beneficiary Details</a></li>
                            <li id="li_siteengneer"><a href="#tabSiteEngineer" class="nav_link" data-toggle="tab">Site Engineer</a></li>
                            <li id="li_ProjectEngineer"><a href="#tabProjectEngineer" class="nav_link" data-toggle="tab">Project Engineer</a></li>
                            <li id="li_cityengineer"><a href="#tabCityEngineer" class="nav_link" data-toggle="tab">City Engineer</a></li>
                            <li id="li_chiefOfficer"><a href="#tabchiefOfficer" class="nav_link" data-toggle="tab">Chief Officer</a></li>
                            <li id="li_accountant"><a href="#tabAccountant" class="nav_link" data-toggle="tab">Accountant</a></li>
                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="tab-content">
                            <div class="tab-pane fade" id="tabdataEngineer"></div>
                            <div class="tab-pane fade" id="tabSiteEngineer"></div>
                            <div class="tab-pane fade" id="tabProjectEngineer"></div>
                            <div class="tab-pane fade" id="tabCityEngineer"></div>
                            <div class="tab-pane fade" id="tabchiefOfficer"></div>
                            <div class="tab-pane fade" id="tabAccountant"></div>
                        </div>
                    </div>
                @*</div>*@
            </div>           
        </div>

[Khan291]

still waiting for solution, anybody solved this ?

please find above solution.