Innerhalb von php-while-schleife datensatz mit javascritp

[Simon P.]

Hallo Felix! Vielen Dank für dein sehr ausführliche Erklärung! Leider habe ich aber noch nicht alles so verstanden, dass ich soweit mein Problem beheben kann. Das hängt wohl damit zusammen, dass ich allgemein noch nicht richtig in den verschiedenen "Sprachen" drin stehe.

es wäre sinnvoll, die weiteren Angaben innerhalb Deines <li>-Elements zu verpacken. Mit CSS (und völlig ohne JavaScript) kannst Du dann die :hover-Pseudoklasse nutzen, um diese Zusatzinformationen anzeigen zu lassen.

Okay, ich sollte also alle meine Infos, hier z.B. ID und Name erstmal in das <li> packen. Soweit so gut...

1. Allgemeine Frage:

Es wäre auch möglich innerhalb der Schleife die Daten in ein Array zu schreiben und anschließend dieses in einer anderen Schleife zu verarbeiten. Das macht man wohl, wenn man die Datenstruktur (DB) von der Präsentation (HTML) abstrahieren will, und das Array einfach einer Template-Maschine in den Rachen wirft. Für Deinen Anwendungsfall sieht es aber tatsächlich so aus, als wäre es beim Abfragen der Datenbank am geschicktesten, das Markup gleich zu generieren.

Leider kam ich in meiner Ausbildung und auch nun schon wieder noch nicht hinter die richtige Logik bei Arrays. Ich habe leider das Problem, dass halt denke, dass ich nur innerhalb dieser einen while schleife arbeiten kann, da ich ja sonst die komplette ausgabe meiner Daten unterbreche, was den Sinn hinter einer Datenbank ja sicherlich entgegen steht. Dann könnte ich auch alle Daten einfach in mein HTML-Dokument eintippen. "Markup" = alles was in "HTML" geschrieben ist (also kein php oder javascript), richtig oder?

Du kannst Markup (HTML-Code) generieren, um es an den Browser zu senden. CSS und JavaScript erledigt dann der Browser. Da kann PHP sinnvollerweise nicht "mitreden".

Wie mache ich das? Also allgemein baue ich meine Webside so auf, dass ich zu jeder HTML Datei eine CSS Datei habe, die ich halt in die HTML einbinde. Damit das schön getrennt ist (im Javascript nicht so, da ich den kopiert habe). Sonst arbeite ich auch mit "inculde" von PhP z.B. für meine Login Daten für den mySQL - Zugang. Was meinst du jetzt mit "...generieren, um es an den Browser zu senden...". Was muss ich anders machen?

Das bedeutet, dass Dein Dokument im Mittelteil etwa so aussieht?
    <li>Name 3</li>
    <p>
        <a href="#" onclick="toggleElementDisplay("box");">Click me!</a>
        <div id="box" style="border: 1px solid #000000; display: none;">
            ID 3
        </div>
    </p>
</ul>[/code]

Da stellen sich mir die Haare zu Berge! Du erzeugst ungültiges Markup!

1.) Verstanden!
2.) <span> Verstanden! Die anderen sind doch dazu gedacht um die Schriftart zu verändern oder?
3.) Das mit der ID weiß ich, sonst halt class. Ich benutze in diesem Beispiel die ID doch nur zweimal wegen der Schleife (darauf habe ich nicht geachtet, danke).

4.) Mache ich sonst auch so, jedoch habe ich diese Variante abkopiert, da ich noch viel Befehler wie z.B. onclick nicht kenne.

Besser so:

<ul id="boxes">

<li>
        Name 1
        <span>ID 1</span>
    </li>
    <li>
        Name 2
        <span>ID 2</span>
    </li>
    <li>
        Name 3
        <span>ID 3</span>
    </li>
</ul>

>   
> Dein CSS sollte dann folgendes enthalten:  
>   
> ~~~css

#boxes li span{  

>     display: none;  
> }  
>   
> #boxes li:hover span {  
>     display: block;  
>     position: absolute;  
> }

Du kannst natürlich noch viel mehr an Eigenschaften definieren, aber mit diesen beiden Rulesets erhältst Du den Hover-Effekt völlig ohne JavaScript.

Ok, das heißt ich arbeite dann mit <span> mit einer class, damit ich per CSS dieses Inline-Elemente formatieren kann. Somit formatiere ich aber nur meine Daten wie z.B. ID. Momentan ist mir leider noch nicht klar, wie ich neben meinem Namen (was ein Serientitel werden soll) einen "Button" auf dem "Anzeigen" steht erzeuge, damit wenn ich auf dem klicke darunter sich ein Fenster öffnet wo Zusatzinfos drin stehen (diese Zusatzinfos, wie z.B. ID, Episodenlänge etc.) sind einfach nur weitere Spalten. Ist meine Datenbank vielleicht flasch aufgebaut? Hover habe ich schon benutzt, das ist doch aber nur beim drüber fahren oder? Ich würder gerne per klick das akitivieren lassen, ginge das?

5.) Das habe ich so gemacht, weil ich ja sonst wieder in mein PHP-Syntax eingegriffen hätte, das ich ja mit '' die Syntax vom Java eingeklammert habe (so hat es mir mein Editor angezeigt).

<a href="#" onclick="toggleElementDisplay('box');">Click me!</a>

Solche Syntaxfehler finden sich am leichtesten, wenn man einen Editor mit Syntaxhighlighting benutzt. Womit arbeitest Du?

Werde ich gleich so nochmal probieren, wobei mir mein Editor das wieder als falsch anzeigt, wie ich bei 5. schon erläutert habe.
Ich arbeite mit "Sublime" und habe mich regelrecht in diesen Editor verliebt (^_-).

Vielen Dank für deine Antwort. Ehrlich gesagt hat es mir ein wenig klarheit verschafft, dennoch habe ich immernoch keine Lösung für mein Problem herauslesen können. Wie du warscheinlich gemerkt hast, bin ich noch blutiger Anfänger. Ich habe vor ca. 1 1/2 Wochen mit HTML angefange (aus Eigeninteresse). Ich bringe mir momentan alles selber bei und habe (warscheinlich deshalb) noch kein richtiges Verständnis für PHP und Allgemeinen Aufbau. Mit HTML komm ich ganz gut klar und auch in CSS fühle ich mich langsam sicherer, aber PHP und mySQL sind echt ein Brocken, den ich erstmal logisch verstehen muss. Deshalb würde ich mich für eine Antwort, bzw. einen Lösungsansatz freuen, hier nochmal kurz eine Art, wie ich es gerne aus meiner Datenbank hätte (rein zum Verständnis, falls ich dich verwirrt haben sollte):

<h1>Serienliste</h1>
<ul>
<li>Serie1</li> (daneben)<span class="Button">Infos</span>
(dadrunter öffnet sich, wenn Button geklickt eine Tabelle, die halt Attribute aus meiner Datenbank enthalten, die im jeweilien Datensatz stehen).

So wäre es schön, sollte das zu kompliziert sein, würde mir auch ein hover erstmal reichen, nur damit ich erstmal weiter arbeiten kann. Leider stellt sich mich halt hauptsächlich die Frage, wie ich aus dieser while-schleife entkomme, denn ich möchte ja schon alle Datensätze mit einem Befehl abfragen, aber gleichzeit evtl. unterschiedliche Datensätze unterschiedlich (Designtechnisch) verändern.

Vielen Dank aufjedenfall für deine Antwort.