Div Reload mit AJAX

Pixel-Wizard · 28 März 2013

Hallo zusammen

Ich baue mir gerade einen Chat auf PHP-Basis (ich weiss ist nicht die beste Lösung, aber das ist jetzt nicht das Thema). Nun müssen die Chat-Teilnehmer, um neue Nachrichten zu erhalten beziehungsweise zu sehen, die Seite andauernd neu laden. Dies ist nicht optimal:???:

Ich habe mich informiert und bin auf die Idee gekommen, dass ich einfach alle 5 Sekunden die Seite neu laden können, um immer die aktuellsten Nachrichte zu erhalten. Dies habe ich auch so gemacht, doch als ich ein bisschen rumgetestet habe, hatte ich schnell gemerkt das auch dies keine gute Lösung ist, denn man hat nur 5 Sekunden Zeit um zu schreiben und muss sich demnach schon recht beeilen.

Was ich nun noch machen kann, ist statt die ganze Seite, einfach das Chat-Div neu zu laden. Der User bemerkt nichts davon und erhält immer die neusten Nachrichten. OPTIMAL!

Ich habe schon mal was gehört und gelesen, dass man mit AJAX, Teile einer Webseite neu laden kann. Da ich aber leider keine Ahnung von AJAX habe, würde ich gerne wissen wie man bei so einem Fall vorgeht? Ich kann JavaScript und PHP aber mit AJAX habe ich noch keine Erfahrung gesammelt.

Wie also wird mit AJAX ein Div regelmässig neu geladen?

Vielen Dank für die Antworten
Liebe Grüsse
Pixel-Wizard

scbawik · 28 März 2013

Mit jQuery (Nicht getestet):

Code:

var timeout = setTimeout(reloadChat, 5000);

function reloadChat () {
    $('.chatroom').load('chatroom.php .chatroom',function () {
         $(this).unwrap();
         timeout = setTimeout(reloadChat, 5000);
    });
}

Erklärung:

$('.chatroom') selektiert das Div mit der CSS-Klasse .chatroom in welches der neue Inhalt geladen werden soll. Wenn bereits etwas drin ist, wird es ersetzt.

Der erste Parameter der load() function gibt erst die zu ladende Datei an (die Aktuelle; $_SERVER['PHP_SELF']) und dann mit Leerzeichen das zu ladende Div. Also wieder .chatroom

Die anonyme Funktion am Schluss wird ausgeführt wenn es geladen wurde. Da ja .chatroom in .chatroom geladen wurde, musst du natürlich noch das Äußere .chatroom entfernen. Das geht mit .unwrap()

Anschließend wird das Timeout erneut gesetzt.

Ich würde allerdings das Timeout auf weniger als 5 Sekunden setzen, da chatten ja wesentlich schneller geht.

PS: Wenn die Seite nach dem Reload kaputt ist, ist das unwrap() falsch gesetzt, dann müsste es $(this).children().unwrap(); heißen.

XraYSoLo · 28 März 2013

Wie wärs mit einem Reload nach jeder Eingabe?

header()

Nils aka XraYSoLo

Pixel-Wizard · 28 März 2013

@scbawik
Diese Variante werde ich gleich mal probieren... Werde mich dann melden, wenn es geklappt hat oder nicht!

@XraYSoLo
Dies geschieht schon. Wenn <Enter> gedrückt wird, ladet die Seite neu, bzw. öffnet einen Link auf sich selber.

scbawik · 28 März 2013

Mach das, es funktioniert aber sicher - wenn du es richtig machst :)

Habe aber nochmal drüber nachgedacht, das ist eher richtig:

Code:

var timeout = setTimeout(reloadChat, 5000);

function reloadChat () {    
$('.chatroom').load('chatroom.php .chatroom',function () {
         $(this).children().unwrap(); // Also doch .children()
         $(this).unbind('load'); // load-Event wieder entfernen, sonst wird immer doppelt, dreifach usw ausgeführt.
         timeout = setTimeout(reloadChat, 5000);    
}); 
}

Pixel-Wizard · 28 März 2013

Ok ich habe ein bisschen mit scbawik's Variante rumprobiert. Vielleicht muss ich zuerst noch die zwei vorhandenen PHP-Blöcke einfügen um die Sache klarer zu machen, denn ich bin mir nicht sicher was ich bei dieser Variante alles noch brauche und was nicht....

1.Block

PHP:

<?php
$message = $_POST["textarea"];
if($message != "")
{
$messageFile = fopen("delMessageFile-tdpsimplechatcomxacom532/messageFile.txt", "a");
$fullMessage = $message . "<br />";
fwrite($messageFile, $fullMessage);
fclose($messageFile);
}
?>

Hier wird die messageFile erstellt und überschrieben, mit den neusten Nachrichten. Natürlich sollte dies auch immer wieder geschehen, sonst refresht man zwar das Chat-Feld, doch die Nachrichten sind immer noch die gleichen. Nun gleich weiter zum nächsten Block:

PHP:

<?php
$file=fopen("delMessageFile-tdpsimplechatcomxacom532/messageFile.txt","r") or fopen("delMessageFile-tdpsimplechatcomxacom532/messageFile.txt","w");
while (!feof($file))
{
echo fgetc($file);
}
fclose($file);
?>

Hier wird ganz einfach die PHP Datei ausgegeben. Dieser Block befindet sich innerhalb des Chat-Feld-DIV's, da ja dort auch der Text ausgegeben werden soll.

Sollte die Methode mit jQuery immer noch gehen, oder braucht es da Anpassungen bis ganz andere Lösungen?

Liebe Grüsse
Pixel-Wizard

scbawik · 28 März 2013

Der PHP-Code ist jQuery egal.

jQuery bekommt auch nur den Quellcode geliefert der durch PHP erzeugt wird. Also so als ob du die Seite direkt aufrufst. Daraus holt sich jQuery dann das was du angegeben hast, in meinem Beispiel .chatroom.
Dieses HTML-Code-Fragment wird dann in das <div class="chatroom"> eingefügt, welches ja bereits auf deiner Chat-Seite ist.

Wichtiger als der PHP-Code ist der generierte HTML-Code, dann kann ich dir helfen den Code anzupassen.

Update:
Habe gerade bemerkt dass der Text auch als Text-File vorliegt. Dann gehts noch einfacher:

Code:

$('.chat-div').load('Der/Pfad/zu/deinem/txt.txt',function () { $(this).unbind('load'); timeout = setTimeout(reloadChat,5000) });

Pixel-Wizard · 28 März 2013

HTML:

 <!DOCTYPE html>
<html>
    <head>
        <title>Simple Chat</title>
        <script src="jquery-1.9.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
        <script src="javascript.js"></script>
    </head>
    
    <body>
    <script>
    window.onload = function()
    {
    var objDiv = document.getElementById("chatField");
    objDiv.scrollTop = objDiv.scrollHeight;
    }
    </script>
        <div id="chat">
            <div id="chatField">
             This is a test<br />test<br />test<br />Let\'s check, were we are<br />This is a test<br />Lets check<br />test<br />test<br />projekt<br />jan<br />asdf<br />            </div>
            <form id="forms" action="Text_IO.php" method="post">
                <input name="textarea" type="text" id="textField" value="" maxlength="70" autofocus="autofocus" placeholder="Enter a message..." autocomplete="off"></input>
            </form>
            <a href="Text_IO.php"><button id="refreshBtn"><img src="http://www.html.de/images/reload.png" id="reloadImage"></img></button></a>
        </div>
    </body>
</html>

Dieser Code wird generiert wenn man ein paarmal was abschickt... Text_IO.php ist diese Datei.

Den jQuery Code binde ich in einer .js Datei ein (natürlich wurde diese verlinkt, ebenso wie jQuery).

Mal schauen ob es nun mit dem neuen Code geht...

scbawik · 28 März 2013

Code:

var timeout = setTimeout(reloadChat,5000);

function reloadChat () {
    $('#chatField').load('Der/Pfad/zu/deinem/txt.txt',function () {
         timeout = setTimeout(reloadChat,5000) 
    });
}

Müssts dann eigentlich sein ...

Pixel-Wizard · 28 März 2013

Zu meiner Enttäuschung muss ich leider mitteilen dass es noch immer nicht funktioniert.

Zwar führt es die Funktion aus (habe ich mit alert getestet), doch leider wird der Inhalt nicht neu geladen...

Was könnte falsch gelaufen sein?

scbawik · 28 März 2013

Wirklich eigenartig, hoffe ich erzähle dir nicht schon die ganze Zeit was falsches.

Bist du dir sicher dass der neue Inhalt nicht geladen wird? Also dass er auch geändert wurde? Solange der Text gleich bleibt, solltest du vom Reload nämlich nichts bemerken.

Ändere mal die Callback-Funktion wie folgt:

Code:

function (data) {
    alert(data);
}

Dann sollte der geladene Inhalt ausgegeben werden.

Poste doch auch mal dein JS.

Pixel-Wizard · 28 März 2013

Ja, ich kann dir sagen wie ich vorgehe:

1. Mit Firefox auf domain gehen

2. Neues Fenster mit Chrome auf domain gehen

3. Im Firefox-Fenster Nachricht eingeben

4. Warten, und es passiert nichts...

5. Bei Reload kommt dann die Nachricht bei Chrome auch...

Das mit dem Callback-Test werde ich gleich mal ausprobieren! Doch im Moment komme ich leider nicht auf den Domain. Werde den Test machen sobald es geht.

Und hier das JavaScript... es ist einfach der Code von dir:

Code:

var timeout = setTimeout(reloadChat, 1000);

function reloadChat () {
    $('#chatField').load("delMessageFile-tdpsimplechatcomxacom532/messageFile.txt",function () {
         timeout = setTimeout(reloadChat, 1000); 
    });
}

Pixel-Wizard · 28 März 2013

Der Callback-Test konnte nicht erfolgreich durchgeführt werden... wenn man

Code:

alert("test");

einsetzt, gibt er dies aus. Wenn man aber danach noch

Code:

alert(delMessageFile-tdpsimplechatcomxacom532/messageFile.txt);

einsetzt, geht nichts mehr...

scbawik · 28 März 2013

Dein letztes alert funktioniert nicht da du einen String auch in Anführungszeichen schreiben musst.

Letzter Versuch:

Code:

var timeout = setTimeout(reloadChat, 1000);

function reloadChat () {
    $('#chatField').load("delMessageFile-tdpsimplechatcomxacom532/messageFile.txt",function (data, status) {
         alert(status);
         timeout = setTimeout(reloadChat, 1000); 
    });
}

Ansonsten musst du dir mal per Firebug oder Chrome -> Anzeigen -> Entwickler die Infos reinziehen.

Und blöde Frage (hoffe ich doch!) - jQuery hast du eingebunden?

Was mir noch einfällt - lässt sich das .txt auch direkt aufrufen? Wenn es nämlich fürs http gesperrt ist, kommt auch jQuery nicht ran.

Pixel-Wizard · 28 März 2013

1. Spannende Sache: Er gibt error aus...

2. jQuery habe ich 100% richtig eingebunden sonst könnte ich gar keinen alert ausgeben...

3. Die .txt Datei lässt sich nicht einfach so im Browser aufrufen und lesen, doch wenn man auf den Pfad geht kommt keine Fehlermeldung das heisst der Pfad ist richitg.

Wenn es nun mit jQuery nicht geht. Geht es irgendwie anders? Mit AJAX oder PHP selber?

scbawik · 28 März 2013

Die load() Funktion von jQuery basiert auf AJAX.

Aber da sich die TXT-Datei nicht direkt aufrufen lässt haben wir das Problem bereits. Entweder du 'öffnest' sie, oder du machst eine PHP-Schnittstelle die deren Inhalt ausgibt - und sich aber direkt (unter der URL) aufrufen lässt. Dann verlinkst du .load() auf die PHP-Datei statt der TXT-Datei.

Du musst bedenken, jQuery wird lokal ausgeführt - nicht auf dem Server. Folglich kann jQuery nur das machen, was der Nutzer der am Browser sitzt auch könnte.

Pixel-Wizard · 28 März 2013

Gute Idee, werde mal diese Vorschläge in die Realität umsetzen. Werde mich melden! Danke

Tronjer · 28 März 2013

Typischer Fall von Voodoo Coding. Man verbindet mehrere Dinge miteinander, wirft per copy & paste eine Funktion ein, die man nicht versteht und wundert sich am Ende, dass nichts funktioniert. ;)

Strukturierter Ansatz:

- jQuery AJAX lernen. Dauert etwa 1h.
5 Ways to Make Ajax Calls with jQuery | Nettuts+

- PHP Script schreiben, welches den Datei-Inhalt als HTML ausgibt.
- Das HTML per AJAX in einen Container laden.

Erst wenn das alles funzt, die AJAX-Funktion mit setTimeOut() verbinden.

Div Reload mit AJAX

Pixel-Wizard

Mitglied

scbawik

Senior HTML'ler

XraYSoLo

Senior HTML'ler

Pixel-Wizard

Mitglied

scbawik

Senior HTML'ler

Pixel-Wizard

Mitglied

scbawik

Senior HTML'ler

Pixel-Wizard

Mitglied

scbawik

Senior HTML'ler

Pixel-Wizard

Mitglied

scbawik

Senior HTML'ler

Pixel-Wizard

Mitglied

Pixel-Wizard

Mitglied

scbawik

Senior HTML'ler

Pixel-Wizard

Mitglied

scbawik

Senior HTML'ler

Pixel-Wizard

Mitglied

Tronjer

Senior HTML'ler

Neueste Beiträge