HLSL Bootstrap Tabs funktionieren nicht

[ClocxHD]

Hallo,

ich habe folgendes Problem mit den Bootstrap-Tabs:
Am Anfang wird das richtige Panel angezeigt.
Wenn ich dann auf einen anderen Tab klicke, wird das erste Panel nicht ausgeblendet, sondern das zweite unten dran gehangen, und so weiter.

Hier der Twig-Code:
http://pastebin.com/67X8eemw

Das Default-Template:
http://pastebin.com/sdjwhsc6

Der gerenderte Code:
http://pastebin.com/BuEdUY7C

In der JavaScript Konsole sind keine Ausgaben.

Verwendet wird Bootstrap 3.3.6.

LG,
ClocxHD

 

[Antoniker]

Hallo ClocxHD,

Wird die Seite jedes mal neu geladen sobald du einen Tab anklickst?
Wenn ich es aus W3Schools richtig lese, dann musst du im href deine HTML-ID mitgeben. Exakt das machst du bereits bei aria-controls (da solltest du dann aber auch "#" voranstellen um eine HTML-ID zu kennzeichnen).


Zwei Tipps noch von mir:

1. Wenn du Twig "projects" immer als Array/ArrayIterable übergibst, brauchst du die If-Abfrage "if projects not empty" nicht machen, du iterierst im Worst-Case über ein leeres Array und führst damit keinen Code aus, was auf's selbe raus kommt, aber leserlicher ist.
2. Aktuell muss dein Twig-Code wissen, dass "project.active" leer sein könnte. Daher solltest du deinem Project (ob Objekt oder Array) beibringen, hier immer true/false zu halten. Damit wird deine Abfrage von

   {% if project.Active is not empty and project.Active == 1 %}

   auf

   {% if project.active %}

   abgekürzt, was deine Businesslogik vom View trennt und gleichzeitig die Lesbarkeit erhöht.

lg, Michael

 

[ClocxHD]

Hallo,

dies habe ich geändert, hat trotzdem nichts gebracht.
Die Seite wird nicht neu geladen.

LG,
ClocxHD

 

[John Reese]

Versuch mal, deinen Tabs standardmäßig, also wenn es sich nicht um das erste .tab-pane handelt, die CSS-Klasse "fade in" zu geben, also zusätzlich die Klasse "in". (Ist allerdings so wie ich das sehe sowieso nur für die Fade-In-Animation zuständig).

Das Markup sieht sonst soweit was die Tabs angeht richtig aus.

Kannst du mal einen Link zu deiner Seite posten, wo du die Tabs eingebaut hast?

 

[ClocxHD]

Wenn ich das mache, funktionieren die Tabs nicht mehr, und alle Panels sind schon beim aufrufen der Seite untereinander.

Hier der Link: http://dev.fabian-thielen.de/projects/overview

 

[Antoniker]

Hi,

der Link ist nicht erreichbar - ich bekomme nur eine 404 Fehlerseite.
Bitte auch den aktualisieren Code hier wieder einstellen, damit wir sehen können wie dein aktuelles Markup aussieht.

lg, Michael

 

[ClocxHD]

Hallo,

ich habe eben den Server neu installiert, jetzt ist die Seite wieder erreichbar.

Hier der neue Code:

{
Error: Parse error on line 1:
{% extends 'templates
-^
Expecting 'STRING', '}'
% extends 'templates/default.twig' %}

{% block content %}
    <div class="jumbotron">
        <h1>{{ title }}</h1>

        <div class="row">
            {% if title == "Projekteübersicht" %}
                <div class="projects-overview">
                    <ul class="nav nav-tabs" role="tablist">
                            {% for project in projects %}
                                <li role="presentation"{% if project.Active %} class="active"{% endif %}><a href="#{{ project.Identifier }}" aria-controls="#{{ project.Identifier }}" data-toggle="tab" role="tab">{{ project.Name }}</a></li>
                            {% endfor %}
                    </ul>

                    <div class="tab-content tab-projects-overview-content">
                            {% for project in projects %}
                                <div id="{{ project.Identifier }}" role="tabpanel" class="tab-pane{% if project.Active is not empty and project.Active == 1 %} active fade in{% else %} fade{% endif %}">
                                    <h2>{{ project.Name }} für {{ project.project_for }}</h2>
                                    <div class="overview-body" data-project="{{ project.Identifier }}">
                                        {{ project.Content | raw }}
                                    </div>
                                </div>
                            {% endfor %}
                    </div>
                </div>
            {% elseif title == "Datenschutz" %}
            {% endif %}
        </div>
    </div>
{% endblock %}

 

[Antoniker]

Dein Twig-Code sieht soweit in Ordnung aus, dein HTML-Markup ist allerdings defekt; siehe W3-Validator.

Es fehlen einige HTML-Tag-Schließungen: </div>, </ul>, </body>.
Wenn du die behebst, werden deine Tab-Panele nicht mehr ineinander gerendert und dein Problem gelöst.

lg, Michael

 

[ClocxHD]

Bei mir ist der Markup nicht defekt, alle schließenden Elemente sind vorhanden.

 

[John Reese]

Dann schau dir mal den von Antoniker geposteten Link zum W3-Validator an.

 

[ClocxHD]

Den habe ich mir ja angeguckt, aber die Elemente sind doch vorhanden

 

[John Reese]

Nur weil Elemente vorhanden sind, heißt das nicht, dass sie in der richtigen Reihenfolge sind.

Schau dir doch nur mal Zeile 126 hier an:
view-source:http://dev.fabian-thielen.de/projects/overview

Wieso steht da ein schließendes <ul>, also </ul> wenn es vorher nicht geöffnet wurde?

Gehe einfach Schritt für Schritt die Meldungen des Validators durch. Er gibt dir sogar Tipps, wo ein Element liegt, welches wie bei dir z.B. eine vorher bereits verwendete ID nutzt.

 

[ClocxHD]

Habe gerade nochmal nachgeguckt, und ja, an dieser Stelle hatte ich anstatt des schließenden div ein ul.
Vielen Dank.

 

[John Reese]

Das war nur ein Problem von vielen, welche der W3-Validator meldet.

Auch wenn dein ursprüngliches Problem mit den untereinander öffnenden Tabs nicht mehr auftritt, solltest du die verbleibenden Fehler auch beheben.