it-swarm.com.de

Erfassen eines "angezeigten" Ereignisses von der Bootstrap-Registerkarte

Ich habe etwas "statisches" HTML auf meiner Seite:

<div id="DIVISIONS">
    <ul class="nav nav-tabs" id="DIVISIONTABS">
        @* <li> nodes will be injected here by javascript *@
    </ul>
    <div class="tab-content" id="DIVISIONTABPANES">
        @* <div class="tab-pane"> nodes will be injected here by javascript *@
    </div>
</div>

Beim Laden der Seite erstelle ich eine Registerkarte "Framework", d. H. Die Bootstrap-Registerkarten und Inhaltscontainer der Registerkarten.

Ich stoße den Prozess aus mit:

$(window).bind("load", prepareDivisionTabs);

Und "prepareDivisionTabs" macht das:

function prepareDivisionTabs() {
    // Retrieve basic data for creating tabs
    $.ajax({
        url: "@Url.Action("GetDivisionDataJson", "League")",
        cache: false
    }).done(function (data) {
        var $tabs = $('#DIVISIONTABS').empty();
        var $panes = $('#DIVISIONTABPANES').empty();
        for (var i = 0; i < data.length; i++) {
            var d = data[i];
            $tabs.append("<li><a href=\"#TABPANE" + d.DivisionId + "\" data-toggle=\"tab\">" + NMWhtmlEncode(d.Name) + "</a></li>");
            $panes.append("<div id=\"TABPANE" + d.DivisionId + "\" class=\"tab-pane\"></div>")
        }
        renderDivisionTabPaneContents(data);
    }).fail(function (err) {
        alert("AJAX error in request: " + JSON.stringify(err, null, 2));
    });
}

Für Informationen führt das "renderDivisionTabPaneContents" in dem obigen Beispiel Folgendes aus:

function renderDivisionTabPaneContents(data) {
    for (var i = 0; i < data.length; i++) {
        var d = data[i];
        renderDivisionTabPaneContent(d.DivisionId);
    }
}

function renderDivisionTabPaneContent(id) {
    var $tabPane = $('#TABPANE' + id);
    $tabPane.addClass("loader")
    $.ajax({
        url: "/League/GetDivisionPartialView?divisionId=" + id,
        cache: false
    }).done(function (html) {
        $tabPane.html(html);
    }).fail(function (err) {
        alert("AJAX error in request: " + JSON.stringify(err, null, 2));
    }).always(function () {
        $tabPane.removeClass("loader")
    });
}

Alles gut so weit. Meine Seite wird geladen, der Inhalt der Registerkarte wird gerendert. Wenn ich auf die verschiedenen Registerkarten klicke, wird der entsprechende Inhalt angezeigt.

Anstatt den gesamten Inhalt beim Start zu laden, möchte ich jetzt den Tab-Inhalt mit dem angezeigten Ereignis der Registerkarten just-in-time laden. Um dies zu testen, wollte ich nur sicherstellen, dass ich eine JavaScript-Benachrichtigung erhalten konnte, wenn die Registerkarte angezeigt wurde. So erstelle ich das Folgende, um das Anhängen der auf der Registerkarte angezeigten Ereignisse auszulösen:

$(function () {
    attachTabShownEvents();
})

was ruft:

function attachTabShownEvents() {
    $(document).on('shown', 'a[data-toggle="tab"]', function (e) {
        alert('TAB CHANGED');
    })
}

Ich würde also erwarten, dass nach dem Tabulatorwechsel die Warnung "TAB CHANGED" angezeigt wird. Aber ... Ich sehe keine Benachrichtigungen. 

Könnte mir hier jemand helfen?

24
Neil W

Die korrekte Ereignisbindung für den Tabulatorwechsel ist shown.bs.tab.

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    alert('TAB CHANGED');
})
76
azz
$(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });
    $('.nav-tabs a').on('shown.bs.tab', function(event){
        alert('tab shown');
    });
});
0
Stnfordly
<a data-toggle="tab" href="#some_special_tab_anchor">

<div id="some_special_tab_anchor" class="tab-pane fade">
    special tab content
</div>

            $( 'a[data-toggle="tab"]' ).on( 'shown.bs.tab', function( evt ) {

                var anchor = $( evt.target ).attr( 'href' );
                alert("TAB SHOWN = "+anchor);

                // take action based on what tab was shown
               if(anchor === "some_special_tab_anchor"){
                  // do my special thing :)
               }

            });
0
Stnfordly

Verwenden Sie mein Nuget-Paket zum Lazyloading von Bootstrap-Registerkarten. Es ist sehr einfach... Fügen Sie einfach die Klasse "lazyload" zum Element "ul" der Bootstrap-Registerkarten hinzu Element (a). das ist es.

https://www.nuget.org/packages/MT.BootstrapTabsLazyLoader.js/

0
mesut

'show' und 'show' events haben für mich nicht funktioniert. Meine Lösung ist nicht genau die Situation von OP, aber die allgemeinen Konzepte sind vorhanden.

Das gleiche Problem hatte ich, als bootstrap seine eigenen Onclick-Events Auf Registerkarten (Menüschaltflächen und Inhaltsanzeigen) erzwang. Ich wollte faul Sachen in ein Panel laden, je nachdem, auf welche Menüschaltfläche geklickt wurde, und einige Buttons zeigen ein Panel auf der aktuellen Seite, andere laden eine Seite in einen Iframe.

Zuerst füllte ich Daten in ein Feld-Tag mit ausgeblendetem Formular, was dasselbe Problem war. Der Trick besteht darin, eine Art Veränderung zu erkennen und darauf zu reagieren. Ich löste das Problem, indem ich eine Änderung erzwang und ein alternatives Ereignis verwendet, das auf die Schaltflächen wartet, ohne dass Bootstrap berührt werden muss.

1) Das iframe-Ziel in der Schaltfläche als Datenattribut speichern:

$('#btn_for_iframe').attr('data-url',iframeurl);

2) binden Sie ein anderes Ereignis auf das Off-Off-Ding, und __den Sie die Quelle des Iframes austauschen

$('#btn_for_iframe').on('mouseup',function(){
   console.log(this+' was activated');
   $('#iframe').attr('src',$('#btn_for_iframe').attr('data-url'));
});

3) erzwingen Sie das 'change'-Ereignis in den Panel-Shows, und laden Sie dann iframe src

$('#iframe_panel_wrapper').show().trigger('change');

oder Sie können den Änderungsauslöser in den Mouseup oben setzen.

0
user3056442