DIV per PHP/JS befüllen ohne die Seite neu aufzubauen

[JS-Laie]

Hallo,

ich habe folgendes Problem. Ich habe eine Art Tagebuch kreiert, dessen einzelne Seiten als Textdateien abgelegt sind (HTML-Schnipsel mit den entsprechenden Formatierungen, IMG-Tags und dem Text). Dass die letzte Seite standardmäßig angezeigt wird, habe ich ohne Probleme mit PHP-Include hinbekommen. Nun habe ich noch ein paar Buttons erstellt, mit denen man zwischen den einzelnen Seiten springen kann. Aber irgendwie will es nicht so
funktionieren, wie ich mir das gedacht habe.

Hier der Aufruf der JavaScript-Funktion vom Button:
<input name="Anfang" type="image" src="Grafiken/PfeilAnfang.gif" onClick="Blaettern()">

Hier die Funktion (ist im Moment erst einmal mit einer festen Seite, aber nicht einmal das funktioniert ("Text" ist der DIV-Block, in dem die Seiten ausgegeben werden sollen):

function Blaettern() {  
	document.getElementById("Text").InnerHTML = "<?php include("Tag_1.txt"); ?>";  
}

Ich bin zum Testen sogar noch einen Schritt weiter zurückgegangen und habe einfach statt des PHP-Includes einen festen Text ausgeben lassen, aber auch der erschien nicht im DIV. Es passierte schlicht und ergreifend gar nichts und der alte Text blieb einfach bestehen (Testumgebung IE8). Kann mir jemand bei diesem Problem weiterhelfen?

Der absolute JS-Laie

[Felix Riesterer]

Lieber JS-Laie,

Du nennst keine Fehlermeldungen... das ist schade, denn sowohl PHP, als auch JavaScript sind in der Regel sehr auskunftsfreudig, wenn ihnen etwas nicht passt.

document.getElementById("Text").InnerHTML = "<?php include("Tag_1.txt"); ?>";

Du wirst hier ein dreifaches Problem haben. Schau Dir doch einmal an, was da als Quelltext in Browser wirklich ankommt! Mir scheint, dass Du das Zusammenspiel von PHP (auf dem Server) und JavaScript (in Deinem Browser) noch nicht restlos durchschaust.

Desweiteren ist JavaScript cAsE-sEnSiTivE. objekt.innerHTML ist etwas völlig anderes, als objekt.InnerHTML!

Außerdem wirst Du ein Problem mit den doppelten Anführungszeichen erhalten. Was spuckt denn include("tag_1.txt") an "Ersatz" aus? Ich stelle mir das gerade so vor:

document.getElementById("Text").innerHTML = "<p><img src="bild.gif" alt="Das bin ich." /></p>  
<p>Heute war mein erster Tag.</p>";

Wie Du siehst, stören sich die doppelten Anführungszeichen des sich öffnenenden Strings in JavaScript mit den doppelten Anführungszeichen der Attributwerte (sieht man hier schön an der Farbgebung).

Besser (aber noch immer "falsch"):

document.getElementById("Text").innerHTML = '<p><img src="bild.gif" alt="Das bin ich." /></p>  
<p>Heute war mein erster Tag.</p>';

Beachte die einfachen und die doppelten Anführungszeichen in obigem Beispiel. Farblich scheint es schon richtig zu sein, aber in JavaScript ist es das noch nicht, denn...

Zuguterletzt kannst Du in JavaScript keinen String über mehrere Zeilen hinweg notieren. In PHP geht das. Beispiele:

$string = "<p>Mein PHP-String<br />  
geht über zwei Zeilen.</p>"; // in PHP OK

var meinString = "<p>Mein JavaScript-String<br />  
geht auch über zwei Zeilen...?</p>"; // geht nicht!

ABER:

var meinString = "<p>Mein JavaScript-String<br />"  
    + "\n" // Zeilenumbruch im String  
    + "geht über zwei Zeilen!</p>"; // in JavaScript OK

Es passierte schlicht und ergreifend gar nichts und der alte Text blieb einfach bestehen (Testumgebung IE8).

Das wage ich zu bezweifeln. Gerade der IE8 macht mittlerweile einigermaßen brauchbare Aussagen über aufgetretene Fehler im Script.

Liebe Grüße,

Felix Riesterer.

[JS-Laie]

Hallo Felix,

vielen Dank schon einmal für deine umfassende Erläuterung. Zunächst einmal passierte mit großem Inner bei innerHTML tatsächlich nichts, zumindest wenn ich einen einfachen einzeiligen Text ausgeben wollte. Ansonsten kam immer die Fehlermeldung "Objekt erwartet!", die aber wohl an der mehrzeiligen Datei liegt. Aber wie bekomme ich denn eine Änderung des Textinhaltes hin, ohne die ganze Seite komplett neu aufbauen zu müssen. Wenn jemand durch das Tagebuch blättern und bei jedem Tag erst wieder ans Ende der Seite scrollen muss, ist das doch hochgradig nervig.

Bin für jede Idee dankbar.

[molily]

wie bekomme ich denn eine Änderung des Textinhaltes hin, ohne die ganze Seite komplett neu aufbauen zu müssen.

Mit XMLHttpRequest - d.h. dem Senden von Anfragen an den Webserver im Hintergrund. Die Serverantwort wird dann mit JavaScript ins aktuelle Dokument eingefügt.

Aber vielleicht solltest du erst versuchen, eine einfache, barrierefreie und robuste Blätternavigation mit PHP ohne JavaScript hinzubekommen. Was spricht dagegen?

Mathias