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
 

basti1012

Erfahrenes Mitglied
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:

Dragosius

Erfahrenes Mitglied
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?
 

basti1012

Erfahrenes Mitglied
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 ?
 

Dragosius

Erfahrenes Mitglied
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:

basti1012

Erfahrenes Mitglied
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.
 

Dragosius

Erfahrenes Mitglied
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.
 

Dragosius

Erfahrenes Mitglied
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:

Dragosius

Erfahrenes Mitglied
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?
 

Sempervivum

Erfahrenes Mitglied
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.
 

Dragosius

Erfahrenes Mitglied
Super, es funktioniert.
$userId ist eine Zahl und $observe ein Array.

Javascript:
<script>
var userId = <?php echo $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>
 

Sempervivum

Erfahrenes Mitglied
$userId ist ein strin bzw 4 Ziffern und $observe ein Array.
In dem Fall lag ich ja ziemlich daneben :LOL: Was hat denn jetzt den Erfolg gebracht? Nur dass Du das json_encode bei $userId und die Gänsefüßchen bei $observer weg gelassen hast?
 

Forum-Statistiken

Themen
272.354
Beiträge
1.558.605
Mitglieder
187.825
Neuestes Mitglied
markus.frick