Inhalte automatisch neuladen

Dragosius

Erfahrenes Mitglied
Hallo zusammen,

ich habe eine Shoutbox und würde diese gerne immer autmatisch neuladen/nachladen lassen, ohne dass der Besucher die Webseite aktiv neu laden muss.
Leider habe ich dies bisher mit den Informationen, die ich so gefunden habe, nicht hin bekommen.

Hier wäre der Code meiner Shoutbox:
Code:
<div style="width:100%;" id="shoutbox">
<?php
    if( mysqli_num_rows($shoutbox) ) {
        ?>
        <table class="tabelle-shoutbox">
        <?php
        foreach($shoutbox as $zaehler => $temp) {
            $istFreund = in_array($temp['user_id'], $observe);
            if( $temp['datum'] < heute() ) {
                $zeit = date("d.m.Y, H:i", strtotime($temp['datum']));
            } else {
                $zeit = date("H:i", strtotime($temp['datum']));
            }
            ?>
            <tr>
            <td><u><?php if($istFreund) { echo "<b>"; } ?><?php echo mitgliedsNameMitProfilLink($temp['user_id']); ?><?php if($istFreund) { echo "</b>"; } ?> (<?php echo $zeit; ?>):</u></td>
            </tr>
            <?php
            echo "<tr><td>".htmlspecialchars_decode($temp['text'], ENT_QUOTES)."</td></tr>";
        }
        echo '</table>';
    }
    ?>
    <form action="<?php echo filter_input(INPUT_SERVER, 'REQUEST_URI'); ?>" method="post">
        <input type="text" maxlength="200" name="shout" style="width:98%" maxlength="200"><br />
        <input type="submit" name="butshout" value="Senden">&nbsp;<a href="index.php?info=shoutbox-archiv">[Archiv]</a>
    </form>
</div>

Wie kann ich dies denn realisieren?

Vielen Dank
 
so eigentlich nicht.
Du mußt den Inhalt mit Ajax nach laden.
Den inhalt deines div ( ohne das <form> ) mit der id="shoutbox packst du in einer extra Datei zb "shoutbox.php".
Die Datei lädst du mit Ajax und packst es mit innerHTML in der id shuotbox.

Das Ajax Script kannst du dann mit setInterval alle X Sekunden neuladen

Ungefähr so ungetestet
shoutbox.php
PHP:
<?php
// bla bla .... Datenbank verbindung und co
if( mysqli_num_rows($shoutbox) ) {
   echo '<table class="tabelle-shoutbox">';
   foreach($shoutbox as $zaehler => $temp) {
       $istFreund = in_array($temp['user_id'], $observe);
       if( $temp['datum'] < heute() ) {
            $zeit = date("d.m.Y, H:i", strtotime($temp['datum']));
       } else {
            $zeit = date("H:i", strtotime($temp['datum']));
       }
       echo '<tr><td><u>';
       if($istFreund) {
             $freund=mitgliedsNameMitProfilLink($temp['user_id']);
             echo "<b>$freund</b>";
       }
        echo "($zeit)</u></td></tr>";
        echo "<tr><td>".htmlspecialchars_decode($temp['text'], ENT_QUOTES)."</td></tr>";
    }
    echo '</table>';
}
?>

HTML:
<div style="width:100%;" id="box">
    <div style="width:100%;" id="shoutbox">
    </div>
    <form action="<?php echo filter_input(INPUT_SERVER, 'REQUEST_URI'); ?>" method="post">
        <input type="text" maxlength="200" name="shout" style="width:98%" maxlength="200"><br />
        <input type="submit" name="butshout" value="Senden">&nbsp;<a href="index.php?info=shoutbox-archiv">[Archiv]</a>
    </form>
</div>

<script>
setInterval(function(){
      hole_shoutbox();
},10000);
function hole_shoutbox(){
          $.ajax({
            type: 'POST',
            url: 'shoutpox.php',
            data: {id:id},// falls was mit gegeben werden muss ansonsten würde auch GET gehen
            success: function(data1){
                $('#shoutbox').html(data1);
            }
        })
  }
hole_shoutbox()
</script>

Das mit den echos könnte man noch schöner machen aber es soll auch nur zeigen wie ich es meine
 
Zuletzt bearbeitet:
Danke für die Antwort.
Das heißt also, dass ich alle Daten für Datenbankabfrage, etc in der shoutbox.php schon einfügen muss.?
Stylingelemte brauche dort aber nicht, oder?
Also das ist an dieser Stelle nur funktionell, oder?
 
Wenn einer in der Shoutbox schreiben möchte wird die Seite ja auch neu geladen.
Soll das so bleiben oder soll das auch ohne neuladen funktionieren ?
 
Ohne Neuladen wäre auf jeden Fall besser, keine Frage :)

Es ist nur so, dass die Shoutbox in einem Mitgliederbereich im Einsatz ist, das heißt, dort wird immer mit seiner eigenen ID gepostet und Gäste schreiben dort gar nicht.
Ich weiß nicht, ob diese Information dafür relevant ist, bzw deswegen die Logik anders sein muss.
 
Zuletzt bearbeitet:
Das ist ja schon fast ein Chat.
Um deinen User zu identifiziern muß er ja eine id oder Usernamen oder sonst was haben.
Das kannst du ja in der shoutbox.php abfragen ob der User eingeloggt ist ( Session ).
Ist das eine fertige Shoutbox , oder eine die du komplett selber erstellt hast ?
Habe eben auch eine gebaut , zumindest soweit das man sehen kann das senden und empfangen über Ajax geht.
Wenn Name leer bleibt wird eine Gast Name eingetragen.
Für User mit Accound müsste man vorher feststellen ob der User angemeldet ist und notfalls ein hidden Feld erstellen mit Token.
Das mit Token und co müssen dir die anderen genauer erklären wie man das machen kann.
 
Die Shoutbox ist komplett selbst gebaut und eben nicht mehr so zeitgemäß, da die Webseite schon über 15 Jahre alt ist und an manchen Stellen lange nichts mehr geändert wurde.
 
Jetzt bräuchte ich hier leider nochmal Hilfe:
HTML:
<script>
setInterval(function(){
      hole_shoutbox();
},10000);
function hole_shoutbox(){
          $.ajax({
            type: 'POST',
            url: 'shoutpox.php',
            data: {id:id},// falls was mit gegeben werden muss ansonsten würde auch GET gehen
            success: function(data1){
                $('#shoutbox').html(data1);
            }
        })
  }
hole_shoutbox()
</script>


Code:
data: {id:id}
Wie kann ich denn hier Wert nutzen, wenn ich ihn übergebe?
So wie ich das sehe, kann ich dort Variablen übergeben, oder?
Wie kann ich denn z.B. die Variable $observe übergeben und diese Variable in der anderen Datei dann auch verwenden? Also die Datei, die unter "url" angegeben ist.


Ich muss zwingend einige Variablen der shoutbox.php übergeben, welche mit der Funktion ja aufgerufen wird, da ich die dort benötigen.
 
Zuletzt bearbeitet:
Ich habe es jetzt mit folgender Variante probiert, welche aber leider noch nicht funktioniert:
Javascript:
<script>
var userId = "<?php echo json_encode($userId); ?>";
var observe = "<?php echo json_encode($observe); ?>";

setInterval(function() {
    hole_shoutbox();
},10000);
function hole_shoutbox() {
    $.ajax({
        type: 'POST',
        url: 'logik/shoutbox.php',
        //data: $(this).serialize(),
        data: {
            userId: userId,
            observe: observe
            },
        success: function(data1){
            $('#shoutbox').html(data1);
        }
    })
}
hole_shoutbox();
</script>

Kann ich die Variablen so nicht übergeben?
 
Ich denke schon, dass Du sie so übergeben kannst.
Aber wenn es sich um eine einzelne Variable handelt, brauchst Du kein JSON:
Code:
var userId = <?php echo $userId; ?>;
var observe = <?php echo $observe; ?>;
Allerdings dürfte das Ergebnis das selbe sein.
 
Zurück