JavaScript aus php-Variable auslesen & auf CSS-Element anwenden

[CitroenDsVier]

Hallo zusammen,

ich habe folgendes Problem:
Um eine kleine Website aufgeräumt zu halten, möchte ich nicht für jede Unterseite eine eigene html/php schreiben. Da wäre mir das verlinken doch zu viel Arbeit, da es in der Sidebar einige Links gibt und diese je nach Pfad der Dateien anders wären, ...
Außerdem wird die Seite vorraussichtlich ziemlich oft geändert / um weitere links erweitert, da würde man jetzt natürlich "CMS" schreien können, das wäre aber ziemlicher Overkill.

Dazu habe ich eine index.php gebaut, die dann - je nach geklicktem link - über $_GET die entsprechende Seite in den content-div einbindet. Das funktioniert soweit problemlos.
Um jetzt dem User zu zeigen, wo er sich befindet, möchte ich den entsprechenden Link in der Sidebar farbig hinterlegen.

Die Sidebar-links haben die IDs "link1", "link2", usw.
Welcher dieser links farbig hinterlegt sein soll, ist in der php-Variable $location gespeichert. (Da steht dann z.B. "link1" drinnen)

Jetzt versuche ich das ganze mit Javascript (womit ich mich aber 0 auskenne), aus ein paar Internetseiten zusammengebastelt, funktioniert aber nicht. Wo liegt hier der Fehler / Wie sähe ein funktionierender JS Code aus?

var main = function() {
	var aElement = document.querySelector("#<?php echo $location; ?>");
	aElement.style.background = "#0f0";
}
			
$(document).ready(main);

MfG, V40

 

[Jesterfox]

Der Code der Sidebar wird doch sicher auch per PHP ausgegeben, oder? Wieso baust du da nicht die Hervorhebung in den PHP Code ein? Hätte den Vorteil das es unabhängig von JS funktioniert.

Zum JS Code, sieht auf den ersten Blick ok aus... was sagt den die Fehlerkonsole vom Browser? oder um mal die Basics sicherzustellen: hast du jQuery auch eingebunden?

 

[CitroenDsVier]

Darüber habe ich auch schon nachgedacht. Allerdings würde das für x Links auch x cases / ifs in PHP bedeuten (link1 geklickt, alle anderen aus; link2 geklickt, alle anderen aus; ....). Da es sich bei den Sidebar-links um Links zu Artikeln handelt, und diese eben die Hauptänderung darstellen werden (dass eben neue dazukommen), würde das immer mehr Aufwand und Codezuwachs bedeuten.

Die Fehlerkonsole sagt 2 Sachen:

ReferenceError: $ is not defined
Die Zeichenkodierung des HTML-Dokuments wurde nicht deklariert. Das Dokument wird in manchen Browser-Konfigurationen mit verstümmeltem Text dargestellt, wenn das Dokument Zeichen außerhalb des US-ASCII-Bereichs enthält. Die Zeichenkodierung der Seite muss im Dokument oder Transferprotokoll deklariert werden.

jQuery einbinden? Wie geht das? Wozu? Was ist das?

 

[isiprimax]

Wenn man die Grundlagen überspring ...

PHP wird Serverseitig ausgeführt und der Code wird vom Client (Browser) nie empfangen, es wird nur die fertige HTML-Seite verschickt.
Javascript wird aber nur Clientseitig ausgeführt und somit kann dein Javascript auch kein PHP Code finden.

Gruß

 

[CitroenDsVier]

dass php aufm server ausgeführt wird, ist mir klar. Sonst hätte es ja seine ganzen Vorteile nicht.

Das ist aber doch falsch, ich will ja von php zu Javascript, nicht umgekehrt. php gibt den Inhalt der Variable ja aus (echo).

 

[Jesterfox]

jQuery einbinden? Wie geht das? Wozu? Was ist das?

jQuery ist das "$" das "not defined" ist ;-) Du benutzt in deinem JavaScript Code Funktionen die nicht nativ zu JS gehören sondern von der jQuery Bibliothek zur Verfügung gestellt werden. Diese muss zusätzlich eingebunden werden damit sie funktioniert.

Alternative da jQ dafür eigentlich overkill ist:

var main = function() {
	var aElement = document.getElementById("<?php echo $location; ?>");
	aElement.style.background = "#0f0";
}
			
document.addEventListener('DOMContentLoaded', main);

(ungetestet, sollte aber funktionieren)

 

[CitroenDsVier]

super, danke Jesterfox!

Dein addEventListener hat funktioniert.

 

[Jesterfox]

Wenn du irgend wann mal mehr mit JS machen willst kannst du dir ja jQuery mal anschauen, das vereinfacht sehr vieles. Ist mittlerweile auch Standard das zu verwenden, daher sind viele Beispiele die man so im Netz findet darauf ausgelegt.

Aber nur für den einen Effekt ists sinnfrei mehrere Kilobyte an zusätzlichen JS Code einzubinden ;-)

 

[CitroenDsVier]

Halt, jetzt sagt die Fehlerkonsole aber, aElement sei null (bei Links außerhalb der sidebar). Kann man das mit einem if abfangen?

Ich versuche schon langsam, mir JS beizubringen, allerdings hat die Website nicht so viel Zeit wie ich für JS :-D
Die jQuery Site werde ich dazu auch mal unter die Lupe nehmen, danke!

 

[Jesterfox]

Ja, mit if (aElement) fragst du ab ob die Variable nach der Zuweisung einen Wert enthält.

 

[T0a5tbr0t]

Erzeuge einfach die Links mit PHP und setze eine entsprechende CSS Klasse auf das HTML Tag. Wenn etwas mit CSS alleine geht, sollte man es auch mit CSS machen.
Und JavaScript Quellcode dynamisch generieren sollte man aus Sicherheitsgründen eigentlich niemals tun. Alleine schon HTML richtig zu Escapen kann schwer sein. Bei JavaScript Quellcode kann man es praktisch vergessen. Da erzeugt man sehr schnell ne XSS Lücke.
Wenn man Daten an JS übergeben muss, dann entweder die Infos aus der HTML Struktur lesen, oder z.B. ein JSON Objekt erzeugen.

 

[CitroenDsVier]

Ja, mit if (aElement) fragst du ab ob die Variable nach der Zuweisung einen Wert enthält.

Super, danke.

@T0a5...: CSS alleine ist nicht möglich, nur in Verbindung mit X php Abfragen. Stell dir vor, wir haben 20 Artikel in der Sidebar. Jetzt kann ich per PHP sagen: "wenn du da bist, dann mach alle Links normal und den einen wo du grad bist in bunt". Das Problem ist jetzt zum Einen, dass ich das 20x sagen muss, und zum Anderen, dass ich bei jedem einzigen Mal auch noch 20x hinschreiben muss, welches jetzt aktiviert/bunt sein soll, und welches nicht.
Erstmal außer hässlich überfülltem Quellcode (serverseitig) kein Problem. Aber: Kommt jetzt der 21. Artikel hinzu, darf ich 20+21 = 41 Zeilen Quellcode dazupacken, nur, um den neuen Artikel zu verlinken. Verstehst du das Problem? Oder gibts da vielleicht auch noch eine Lösung für?

 

[Jesterfox]

Da gibst prinzipiell 2 Möglichkeiten, einerseits kann man die ifs recht kompakt und lokal halten, also das man wenn die Variable dem aktuellen Menüpunkt entspricht zusätzlich noch die klasse mit dran hängt. Oder alternativ den ganzen Code umbauen so dass das Menü über ne Schleife aus einem Array das die Menüpunkte enthält erzeugt wird. Dann musst du den Code für das Menü nie wieder anfassen sondern nur das Array erweitern.

 

[CitroenDsVier]

Das wäre eine Möglichkeit. Werde ich ausprobieren (morgen dann). Mit dieser XSS Sicherheitslücke hab ich da doch ein flaues Gefühl im Bauch.

 

[Jesterfox]

Ja, mit XSS ist nicht zu spaßen. Hängt aber auch davon ab welche Werte die Variable die du da in den JS Code einfügst haben kann und woher diese kommen. Wenn das mehr oder weniger direkt aus _GET kommt ist das übel... wenns gegen eine Whitelist an erlaubten Werten geprüft und alles andere verworfen wird ists recht sicher. Der Rest liegt irgendwo dazwischen aber mit Tendenz zu unsicher da dynamischer JS Code eben schwer abzusichern ist.

 

[CitroenDsVier]

<a href="?lnk=news1" <?php if($location=="news1") { echo "class=\"checked\""; } ?>><span>*Linktitel*</span></a>

So hab ichs jetzt gelöst. Merke keinen Unterschied zu Javascript, neben dem besseren Gefühl dabei.

Danke für eure Beratung

 

[r15ch13]

<?php
$links = [
    'news1' => 'News',
    'link1' => 'Link 1',
    'link2' => 'Link 2',
    'link3' => 'Link 3',
];

foreach ($links as $link => $title) {
    echo '<a href="?lnk=' . $link . '" class="' . ($location == $link ? 'checked' : '') . '"><span>' . $title . '</span></a>';
}

Die Array Variante