Ich habe auch eben noch ein bisschen mit der Tabelle rumprobiert und kann es sein, dass wenn kein aktueller Termin vorhanden ist automatisch die erste Zeile hervorgehoben wird?
Da hast Du Recht, ich habe das geändert.
Ebenso habe ich das Slideup/Slidedown für die Haupttabelle eingebaut:
Funktioniert denn das Ajax und das PHP?
"Ich würde am liebsten die Tabelle noch responsive machen. Ich habe mir das so vorgestellt, dass über Media Queries alles ausgeblendet wird außer die Spalte "Thema" und dann bei einem Klick auf das jeweilige Thema die anderen Informationen wie bei einem Dropdownmenü nach unten aufklappen oder so. Wie könnte ich das am besten Umsetzen?"
Das lässt sich relativ leicht mit der jQuery-Funktion slideDown() machen. Ich nehme an, Du meinst diese zweite Tabelle, in der nur der nächstliegende Termin angezeigt wird?
"Und ich hätte noch die Frage zum PHP mach ich dann einfach in der Sidebar das Include ohne was anderes rein oder muss die Tabelle da bleiben oder wie ist das? Wie wird das angezeigt dann?"
Nein, die Tabelle brauchst Du dort nicht. Das include wirkt genau so, als wenn Du den Inhalt der Datei in die Zwischenablage kopierst und an der Stelle, wo das include steht, einfügst. Probiere es einfach aus, dann wirst Du es in der Quelltext-Ansicht deines Browser sehen.
Diese Frage wird häufig gestellt und die Antwort ist einfach: Lagere den Inhalt, der auf allen Seiten gleich ist, in eine Datei aus und binde diese mit PHP-Include ein:
<?php include('deine-include-datei.html'); ?>Dein Webspace muss PHP unterstützen und Du musst den Dateien, die auf diese Weise includieren, die Endung PHP geben. Füge den Code dort ein, wo der Inhalt auf der betr. Seite sichtbar sein soll.
Nein, das Include kommt dahin, wo der Inhalt eingefügt werden soll. Genau an der Stelle erscheint dann der Inhalt der Datei, die Du includierst.
Aber das HTML funktioniert dann noch?
Ja, das HTML wird unverändert übernommen.
Und Dw gibt beim JavaScript die Fehlermeldung bei var s = data; ('s' is defined but never used) aus
Das kannst Du ignorieren. Wie die Fehlermeldung sagt, ist es lediglich eine Warnung, weil die Variable s definiert aber nie benutzt wird. Ich habe das nur zu Testzwecken eingefügt, Du kannst den Callback auch weg lassen:
$.post("sidebar-schreiben.php", params);
Ich benutze XAMPP zwar nicht, aber ich weiß, dass es von sehr vielen benutzt wird und ich glaube nicht, dass es Risiken birgt.
Du hast Recht, das hatte ich vergessen zu erwähnen: Wenn Du PHP verwendest, muss die Datei auf die Endung "php" haben, sonst wird der Code nicht geparst.
Das ist relativ einfach, wenn man weiß, wie es geht.
Zunächst das Javascript, am Ende des bisherigen Codes einfügen:
var params = {
sThema: rows[rowIdx].cells[0].innerHTML,
sDatum: rows[rowIdx].cells[1].innerHTML,
sUhrzeit: rows[rowIdx].cells[2].innerHTML,
sOrt: rows[rowIdx].cells[3].innerHTML
};
$.post("sidebar-schreiben.php", params, function (data) {
var s = data;
});
Dann das PHP, dieses musst Du in eine Datei sidebar-schreiben.php einfügen:
<?php
$thehtml = ' <div id="sidebar">
<h4>Neue Termine:</h4>
<table id="sidebartabelle">
<tr>
<td id="sThema">' . $_POST['sThema'] . '</td>
</tr>
<tr class="zweitezeile">
<td id="sDatum">' . $_POST['sDatum'] . '</td>
</tr>
<tr>
<td id="sUhrzeit">' . $_POST['sUhrzeit'] . '</td>
</tr>
<tr class="zweitezeile">
<td id="sOrt">' . $_POST['sOrt'] . '</td>
</tr>
</table>
</div>';
file_put_contents("sidebar.html", $thehtml);
echo $thehtml;
?>
Dann wird eine Datei sidebar.html angelegt. Damit es funktioniert, muss PHP verfügbar sein. Wenn Du es lokal testen willst, musst Du einen Server mit PHP auf deinem Computer installieren. XAMPP ist ein verbreitetes Paket. Auf jeden Fall zu empfehlen, wenn Du PHP lernen willst.
Die Datei sidebar.html kannst Du dann in deine anderen Seiten mit PHP-Include einbinden:
<?php include('sidebar.html'); ?>
Viel Erfolg!
Über eine Erwähnung würde ich mich natürlich freuen, muss aber nicht sein. Mein Name ist Ulrich Bangert.
Das lässt sich leicht beheben:
var terminauswahl = document.getElementById("terminauswahl");
terminauswahl.innerHTML = "";
for (var i = 0; i < rows.length; i++) {
var currentTime = myParseDate(rows, i).getTime();
if (currentTime > now 
i == 0) {
var timeStr = rows[ i ].cells[1].innerHTML + " " + rows[ i ].cells[2].innerHTML;
var opt = document.createElement("option");
opt.value = timeStr;
opt.innerHTML = timeStr;
terminauswahl.appendChild(opt);
}
}
Habe ebenfalls noch Mal das von dir übernommen, Javascript, CSS und das HTML des Formulars, und bei mir funktioniert es.
Steht das Formular auch vor dem Javascript?
Überprüfe noch Mal das Javascript. Wie ich schrieb, hatte ich zunächst Fehler drin und dann editiert. Übernimm das letzte noch Mal aus meinem Posting.,
Natürlich. Das war nur eine Anmerkung, weil Du nur das leere Tag ohne options brauchst.
Ja, das HTML ist soweit richtig. Du brauchst nur ein select-Tag mit der ID "terminauswahl".
Irgendwo ist ein Fehler, das Selectfeld ist leer
Bei mir funktioniert es. Welchen Code hast Du jetzt, den aus pastebin, oder den zweiten, den ich im Forum gepostet habe? Ich hatte Probleme mit dem [ i ] und musste meinen Post editieren. Möglicher Weise hast Du zuvor eine fehlerhafte Version erwischt.
Und mir ist noch ein anderes Problem aufgefallen die Sidebar funktioniert nicht auf anderen Seiten...
Das liegt daran, dass alles, was man mit Javascript macht, auf die aktuelle Seite beschränkt ist. Will man die Sidebar auf allen Seiten haben, muss man PHP einbeziehen: Mit Ajax die Daten an den Server übertragen; das PHP-Skript generiert das HTML und trägt es in eine Datei ein; diese kannst Du dann auf allen Seiten mit PHP-Include einbinden. Wenn Du das brauchst, kann ich es für dich programmieren.
Dann muss ich die Options aber noch mit: ... füllen, oder?
Das tut das Script schon, siehe am Ende des Javascript-Abschnitts.
Aber dann wenn nur z.B. 2 Termine aktuell sind, sind auch 3 Felder leer...
Das kann man leicht vermeiden, indem man die options nicht nur mit Inhalt füllt, sondern auch automatisch anlegt:
var terminauswahl = document.getElementById("terminauswahl");
terminauswahl.innerHTML = "";
for (var i = 0; i < rows.length; i++) {
var time = rows[ i ].cells[1].innerHTML + " " + rows[ i ].cells[2].innerHTML;
var opt = document.createElement("option");
opt.value = time;
opt.innerHTML = time;
terminauswahl.appendChild(opt);
}
Würde dann so aussehen:
http://pastebin.com/XKg151Yk
Bzgl. der Validierung verhält dies sich IMO auch nicht anders als ein date-Input: Da der Benutzer nur eine Auswahl aus den Vorgaben treffen kann, kann er nichts fehlerhaftes eingeben.
Unter value kann man auch ein abweichendes Format eintragen, wenn Du es bei der Auswertung des Formulars brauchst.
<input type="date"> ist nur bedingt zu empfehlen, weil es von IE nicht unterstützt wird. In diesem Fall wäre es einfacher, ein select-option zu verwenden und automatisch mit den Daten zu füllen. Überleg mal, ob das für dich in Frage kommt.
Da Du den Zellen IDs gegeben hast, ist es noch einfacher:
rows[rowIdx].style.backgroundColor = "lightblue";
rows[rowIdx].style.border = "thin solid blue";
document.getElementById("sThema").innerHTML = rows[rowIdx].cells[0].innerHTML;
document.getElementById("sDatum").innerHTML = rows[rowIdx].cells[1].innerHTML;
document.getElementById("sUhrzeit").innerHTML = rows[rowIdx].cells[2].innerHTML;
document.getElementById("sOrt").innerHTML = rows[rowIdx].cells[3].innerHTML;