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();
- }
- <?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();
- }
- <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>
Grüße,
Stef