Wie lädt man Ajax Bootstrap Tabs dynamisch mit Vorlage Jinja Flask?

Question

Ich muss Daten aus der Datenbank laden, um ein Menü zu erstellen, wie kann ich die Daten an eine Ajax-Anfrage übergeben, benötigen Sie eine Ajax-Anfrage? Wenn ich im Menü klicken, wird einfach auf den Link laden, die in dem Registerkarte-Bereich auf wurden, nicht alle drei, habe ich nichts zu diesem speziellen Thema finden:

<ul class="nav nav-tabs"> 
<li class="active"><a href="#home">Home</a></li> 
<li><a href="#menu1">Menu 1</a></li> 
<li><a href="#menu2">Menu 2</a></li> 
<li><a href="#menu3">Menu 3</a></li> 
</ul> 

<div class="tab-content"> 
<div id="home" class="tab-pane fade in active"> 
    <h3>HOME</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
</div> 
<div id="menu1" class="tab-pane fade"> 
    <h3>Menu 1</h3> 
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 

Beispiel mit php:

Dynamic Bootstrap Tabs using PHP/MySQL

http://www.99logic.com/how-to-create-dynamic-tab-using-ajax-jquery-in-php/

Answer 1

Diese so ziemlich auf die gleiche Weise funktioniert wie die PHP Sie verwiesen verknüpft, da es sich um eine meist clientseitige Lösung ist.

Die Basisseite, die im Browser geladen wird, muss über die gesamte Registerkartenstruktur verfügen. Auf dieser Seite müssen Sie Klickereignisse auf den Tabs behandeln. Auf jedem Click-Handler der Registerkarte geben Sie einen Ajax-Aufruf aus, um den entsprechenden HTML-Code vom Server abzurufen. Die URLs für diese Endpunkte könnten beispielsweise /menu1, /menu2 und so weiter sein. Der Flask-Server definiert diese Endpunkte und gibt den Inhalt jeder darin enthaltenen Registerkarte zurück. Sie können diese als Jinja2-Vorlagen definieren, wenn Sie möchten. Die Ajax-Anforderung im Client hat einen Abschlussrückruf, und Sie werden den HTML-Code aus der Anfrage übernehmen und in den Hauptteil der Registerkarte einfügen. Für alles außer den serverseitigen Endpunkten können Sie den Code aus den PHP-Lösungen übernehmen, die alle gleich funktionieren sollten.

Hoffe, das hilft!