Nicht alle Tabs vorladen

[Dragosius]

Hallo,

ich habe bei mir folgendes Tabmenü im Einsatz:

<div class="tabsy">
    <input type="radio" id="tab1" name="tab" />
    <label class="tabButton" for="tab1">Karten kaufen</label>
    
    <div class="tab">
        <div class="tab-content">
            <?php include('templates/secondhand/kaufen.php'); ?>
        </div>
    </div>

    <input type="radio" id="tab2" name="tab" checked />
    <label class="tabButton" for="tab2">Karten verkaufen</label>
    
    <div class="tab">
        <div class="tab-content">
            <?php include('templates/secondhand/verkaufen.php'); ?>
        </div>
    </div>

    <input type="radio" id="tab3" name="tab" />
    <label class="tabButton" for="tab3">Meine Angebote</label>
    
    <div class="tab">
        <div class="tab-content">
            <?php include('templates/secondhand/angebote.php'); ?>
        </div>
    </div>
</div>

Dies funktioniert auch super.
Nur möchte ich das Tabmenü jetzt an einer anderen Stellen verwenden, wo nicht alle Tabs vorgeladen werden dürfen, da dies einfach zu lange dauert.
Der jeweilige Tab soll erst geladen werden, wenn ich diesen Tab auch wirklich anklicken.
Wie kann ich das denn am Besten realisieren?


Vielen Dank

 

[EuroCent]

Du könntest es mit einer Funktion belegen

 

[Dragosius]

Danke für die Info.
Ich denke, das sollte ich am Besten machen, wenn man auf das "input" klickt, oder?
Wie kann ich da denn eine Funktion aufrufen?

 

[EuroCent]

Entweder du bindest deine Tabs in eine Funktion ein.
Beispielsweise:

<?php
function __getTabs($rolle = 'user') {
    $tabs = 'INHALT TAB 1';
    $tabs .= 'ALLE TABS';
    switch($rolle) {
        case 'user':
            $tabs .= 'ROLLE-TAB';
        break;
        case 'mod':
            $tabs .= 'MODERATOR-TAB';
        break;
        case 'adm':
            $tabs .= 'ADMIN-TAB';
        break;
        case 'guest':
            $tabs .= 'GUEST-TAB';
        break;
        default:
            $tabs .= 'ANDERE TABS';
        break;
    }
    
    return $tabs;
}

function __getTabs($rolle = 'user') {
    $tabs = 'INHALT TAB 1';
    $tabs .= 'ALLE TABS';
    switch($rolle) {
        case 'user':
            $tabs .= 'ROLLE-TAB';
        break;
        case 'mod':
            $tabs .= 'MODERATOR-TAB';
        break;
        case 'adm':
            $tabs .= 'ADMIN-TAB';
        break;
        case 'guest':
            $tabs .= 'GUEST-TAB';
        break;
        default:
            $tabs .= 'ANDERE TABS';
        break;
    }
    
    echo $tabs;
}

/* Aufruf bei Return mit Rolle ADM*/
echo __getTabs('adm');

/* Aufruf wenn Funktion echo hat */
__getTabs('adm');
?>

 

[Sempervivum]

Wenn ich deinen Plan richtig verstanden habe, sollte es so funktionieren:

$(".tabButton").on("click", function() {
    var container = $(this).next(".tab").find(".tab-content");
    var filename ="templates/secondhand/ + "$(this).data("filename");
    if (!container.hasClass("loaded")) container.load(filename);
});

Dazu musst Du den Dateinamen der zu ladenden Datei als data-Attribut bei dem Label hinterlegen. Ist der Content schon geladen, bekommt der Container die Klasse "loaded":

    <input type="radio" id="tab1" name="tab" />
    <label class="tabButton" for="tab1">Karten kaufen</label>
    
    <div class="tab">
        <!-- dieser Container wird sofort geladen
        und bekommt die Klasse "loaded"-->
        <div class="tab-content loaded">
            <?php include('templates/secondhand/kaufen.php'); ?>
        </div>
    </div>

    <input type="radio" id="tab2" name="tab" checked />
    <label class="tabButton" for="tab2"
           data-filename="verkaufen.php">Karten verkaufen</label>
    <div class="tab">
        <!-- dieser Container wird erst beim Klick auf das Label geladen
        das Label enthaelt den Dateinamen als data-Attribut -->
        <div class="tab-content">
        </div>
    </div>

Ungetestet, es war mir zu aufwändig, diese Konfiguration mit mehreren Dateien aufzubauen.

 

[Dragosius]

Danke dir.

Leider konnte ich es jetzt erst testen.

Was machen ich denn falsch?
SyntaxError: unexpected token: identifier[Weitere Informationen]

Der nachzuladende Tab ladet somit nicht.

<script>
$(".tabButton").on("click", function() {
    var container = $(this).next(".tab").find(".tab-content");
    var filename ="templates/secondhand/ + "$(this).data("filename");
    if (!container.hasClass("loaded")) container.load(filename);
});
</script>

<div class="tabsy">
    <input type="radio" id="tab1" name="tab" checked />
    <label class="tabButton" for="tab1">Karten kaufen</label>
    
    <div class="tab">
        <!-- dieser Container wird sofort geladen und bekommt die Klasse "loaded"-->
        <div class="tab-content loaded">
            <?php include('templates/secondhand/kaufen.php'); ?>
        </div>
    </div>

    <input type="radio" id="tab2" name="tab" />
    <label class="tabButton" for="tab2" data-filename="verkaufen.php">Karten verkaufen</label>
    <div class="tab">
        <!-- dieser Container wird erst beim Klick auf das Label geladen das Label enthaelt den Dateinamen als data-Attribut -->
        <div class="tab-content">
        </div>
    </div>
</div>

 

[Sempervivum]

Du machst gar nichts falsch, wie gesagt, nicht getestet und in meinem Code war ein Fehler in der dritten Zeile: Anführungszeichen falsch platziert. So sollte es richtig sein:

$(".tabButton").on("click", function() {
    var container = $(this).next(".tab").find(".tab-content");
    var filename ="templates/secondhand/" + $(this).data("filename");
    if (!container.hasClass("loaded")) container.load(filename);
});

 

[Dragosius]

Danke dir, jetzt erhalte ich keinen Fehler mehr in der Konsole, jedoch wird leider immer noch kein Inhalt beim wechseln des Tabs angezeigt.

 

[Sempervivum]

Sieh schon Mal in der Fehlerkonsole nach, ob etwas angezeigt wird. Ich baue dann mal eine einfache Testumgebung ...

 

[Dragosius]

In der Konsole des Browsers wird leider gar nichts angezeigt.
Weder beim Laden noch beim Wechseln der Tabs.