Hey,
ich baue mir grad ein Chat.
Nun möchte ich, dass die Nachrichten mittels Ajax geladen und ausgegeben werden. Dies funktioniert auch soweit. Diese Funktion möchte ich aber auch gerne ausführen wenn der Button geklickt wird, sodass die neue Nachricht auch angezeigt wird. Daran scheitere ich aber. Ich habe bereits versucht die Funktion in der anderen Funktion mitaufzurufen. Da ist das Problem, dass erst nach dem click auf den Button, alle Nachrichten angezeigt werden, da wird aber alles sofort aktualisiert. Wenn ich die Funktion dann zusätzlich außerhalb aufrufe, dann habe ich wieder das Problem, dass ich die Seite 2 mal laden muss, damit ich die ganzen Nachrichten sehe.
Ich bin gerade wirklich ratlos. Habe auch viel gegoogelt. Aber leider nicht so viel nützliches dabei gewesen.
Das sind meine Codes:
window.onload = function(){
var button = document.getElementById("messageButton");
var form = document.getElementById("messageForm");
button.addEventListener("click", sendMessage);
function sendMessage(e){
e.preventDefault();
getMessages();
var message = new FormData(document.querySelector("form[id='messageForm']"));
var request = new XMLHttpRequest();
request.addEventListener("load", function(){
document.getElementById("ausgabe").innerHTML = this.responseText;
});
request.open("POST", "checkAll.php", true);
request.send(message);
form.reset();
}
function getMessages(){
var req = new XMLHttpRequest();
req.addEventListener("load", function(){
document.getElementById("allMessages").innerHTML = this.responseText;
});
req.open("GET", "allMessages.php", true);
req.send();
}
getMessages();
}
Alles anzeigen
<?php
try{
$dbv = new PDO("mysql:host=127.0.0.1;dbname=chat;charset=utf8", "root", "");
//Select and Fetch all Messages
$selectStmt = $dbv->prepare("SELECT username, message, created_at FROM messages");
$selectStmt->execute();
$messages = $selectStmt->fetchAll(PDO::FETCH_ASSOC);
// Output
foreach ($messages as $key => $value) {
$date = $value["created_at"];
$date = explode(" ", $date);
$time = $date[1];
$time = substr($time, 0, 8);
echo "<div class='row' id='showMessages'>";
echo "<div class='col-sm-3 border border-primary'>";
echo htmlspecialchars($value["username"]);
echo "</div>";
echo "<div class='col-sm-7 border border-primary'>";
echo htmlspecialchars($value["message"]);
echo "</div>";
echo "<div class='col-sm-2 border border-primary'>";
echo $time;
echo "</div>";
echo "</div>";
}
}catch(EXCEPTION $a){
echo "Ein Fehler ist aufgetreten: " . $a->getMessage();
exit();
}
Alles anzeigen
<section class="container">
<div id="allMessages">
</div>
<form method="post" id="messageForm" class="mt-5">
<div class="form-group">
<textarea name="message" id="message" class="form-control"></textarea>
</div>
<button name="sendMessage" id="messageButton" class="btn btn-primary form-control">Nachricht senden!</button>
</form>
<div id="ausgabe">
</div>
</section>
Alles anzeigen
Grüße,
Stef