# Gästebuch - Neuen Eintrag einblenden, ohne Seitenrefresh



## Kalma (5. August 2010)

Guten Morgen,

ich versuche momentan, ein einfaches Gästebuch zu realisieren wo der neue Eintrag nach dem Senden-klick direkt unten eingeblendet wird.


Ich habe bisher eine PHP-Funktion die die Einträge ausliest.

Mein Ajax-Script sieht bis jetzt so aus:

```
function submitform(file, form, errordiv, successdiv)
{
    $.ajax({
       type: "POST",
       url: file;
       data: $(form).serialize();
       dataType: "json",
       success: function(msg) {
           errorstatus = parseInt(msg.status);

           if(errorstatus == 3) {
               // ok, seite aktualisieren
               error(1, msg.txt, successdiv); // bisschen unlogisch. aber heißt soviel: aktiviere div mit dem namen aus "successdiv" und schreibe die json nachricht rein.
              
              window.setTimeout(update,2000);
              function update()
              {
                  window.location.reload();
              }    
           } else {
                 error(1, msg.txt, errordiv); //aktiviere error-div und schreibe nachricht rein.
           }
       }
    });
}
```

Die PHP-statusmeldungen sehen so aus:

```
echo '{status:3,txt:"Dein Eintrag wurde gespeichert"}';
exit;
//oder
die('{status:0,txt:"Dein Eintrag konnte nicht gespeichert werden!"}');
```


Das ganze ist ja so sehr unschön, denn:
- lasse ich die Seite sichtbar aktualisieren brauche ich ja auch gar kein Ajax verwenden.
- die status-meldung für den Erfolg des speicherns wird einfach abgebrochen.

Ich hätte gern folgendes realisiert:
- Man klickt auf Senden
- Error:
---> Error-Nachricht wird eingeblendet und bleibt stehen, bis man entweder erfolgreich eine Nachricht sendet, oder vor Verzweiflung die Seite wechselt 
- Success
---> Erfolgsnachricht wird eingeblendet (2-5 Sekunden oder so)
---> Die Einträge unter der Eingabe Box werden aktualisiert.
---> Nachricht wird ausgeblendet


Ich würde mir das ganze so vorstellen.
In dem success-Teil in dem Ajax Script lasse ich die PHP-Datei erneut aufrufen, damit die PHP-Funktion "getEntries();" neu aufgerufen wird und neue Einträge ausliest und ausgibt.
Dann könnte ich wie bisher mit dem setTimeOut(); die Success-Nachricht ein/ausblenden. Aber wie rufe ich die PHP-Funktion neu auf?


Gruß und vielen Dank im Vorraus!


----------



## StupidBoy (5. August 2010)

Ich machs immer so, dass ich beim Absenden via Ajax eine Serverseitige Aktion auslöse. Diese liefert mir dann einen entsprechenden Statuscode und entsprechend Fehlermeldungen oder anzuzeigenden Content (in deinem Fall der letzte Eintrag).

Also folgendermaßen 

Absende Button wird geklickt -> JS-Funktion wird aufgerufen und übergibt mittels $.ajax() oder einer verwandten JQuery-Methode die Daten an dein PHP-Skript -> das PHP-Skript validiert den Eintrag und speichert diesen -> Wenn alles Ok ist liefert dein PHP-Skript den Eintrag zurück an dein JS (.responseText() o.ä.) -> Dann fügst du den Eintrag mittels .html() o.ä. in die Seite ein. 

Fertig is die Laube.

Edit: Ein Blick in die Jquery-Api-Docs könnte helfen, beo .post() ist glaub ich schon ein entsprechendes Beispiel. Im Übrigen gibts du doch schon deine Erfolgsmeldung zurück, warum stattdessen nicht den soeben gespeicherten Beitrag zurückgeben?


----------



## Kalma (5. August 2010)

Danke für die Antwort.

Ja so könnte ich es machen, klaro.
Aber dieses Problem habe ich nicht nur bei dem "Gästebuch", sondern auch zum Beispiel wenn ich Profildaten editieren lasse.

Da werden über die Userdaten INputs gelegt, und wenn die Daten geändert wurden, wird der editieren-div ausgeblendet, und die Daten sollen aktualisiert werden.
Da will ich nicht alle mit .html eingeben.


----------



## StupidBoy (5. August 2010)

Naja, du kannst natürlich auch die ganze Maske zurückgeben und anzeigen lassen.
Wenn du unbedingt einen zusätzlichen Request absetzen willst (Serverlast), so steht es dir natürlich frei, nach dem dein erster XHR vollzug meldet das Skript (oder irgend ein anderes Skript) gleich nochmal aufzurufen. Welche Funktion dann genau verwendet wird ließe sich ja ohne Probleme mit einen einfachen Parameter steuern den du beim Aufruf mitgibts und serverseitig verarbeitest (das war doch was du wolltest, oder?).


----------



## Kalma (6. August 2010)

StupidBoy hat gesagt.:


> Welche Funktion dann genau verwendet wird ließe sich ja ohne Probleme mit einen einfachen Parameter steuern den du beim Aufruf mitgibts und serverseitig verarbeitest (das war doch was du wolltest, oder?).


 
Ja genau, so wollte ich das machen.

Also zum Beispiel um das Gästebuch zu aktualisierien, irgendwie so:


```
if(isset($_POST['refresh'])) {
    $entries = $gb->getEntries();
}
```

Irgendwie so wäre das dann ja, ich weiß nur nciht wie ich die PHP-Datei aufrufe. Einfach wie wenn ich die Daten sende?


Wie ist das bei Facebook, SchulerVZ etc gelöst? weiß das jemand?


----------



## StupidBoy (6. August 2010)

Ganz einfach, das geht mit jQuery.post().


```
$.post("test.php", {refresh: "true" },
   function(data){
     postAnzeigen(data);
   });

function postAnzeigen(data){
   //dein Code zum einfügen/anzeigen des Post.
}
```


```
if(isset($_POST['refresh']) && $_POST['refresh'] == "true") { 
    $entries = $gb->getEntries(); 
}
```


----------



## Kalma (9. August 2010)

Verstehe ich dich richtig?


```
function postAnzeigen(data)
```

ist das jetzt zum speichern des Posts oder wird dort der neue Post übergeben?
Ich nehme mal an ersteres.

Muss ich dieses postAnzeigen(); unbedingt verwenden?
Es würde doch reichen, wenn die Datei aktualisiert wird, oder sehe ich das falsch?

Danke für die antwort


----------



## StupidBoy (11. August 2010)

PostAnzeigen() ist einfach nur eine JS-Funktion die den Inhalt einblendet, dieser befindet sich im Argument Data. Die Funktion wird automatisch als Callback-Funktion aufgerufen wenn der XHR abgeschlossen ist.


----------



## Kalma (19. September 2010)

Hallo,

ich habe folgendes Tutorial gefunden:
http://www.99points.info/2010/07/fa...ts-system-using-jquery-ajax-and-php-reloaded/

Das hab ich einfach mal durchgemacht und siehe da es funktioniert, ohne Smarty Templates.

Sobald ich das ganze jetz in meine Seite mit Templates einbaue, wird der neue Eintrag einfach nicht wieder angezeigt.

So sieht mein PHP-Teil vom Ablauf her aus:

```
wenn neuer eintrag eingetragen wird
      - eintrag eintragen
      - result: lese neue einträge aus
  sonst
      - result: lese einträge aus

  entries = array()
  while(row = mysql_fetch_assoc(result)
      schreibe einträge in entries

  übergebe entries an template
```
(voll billig-pseudo-code)


Jetzt im Template habe ich einfach eine {foreach from=$entries} schleife.

Jetz ist natürlich klar, dass der neuste Eintrag nicht eingeblendet werden kann, da er im PHP-Teil nicht ausgegeben werden kann.

Könntet ihr mir einen Denkanstoß (oder mehr) geben, wie man das nun lösen kann?

vielen Dank
Kalma


----------

