First i want to thank you for reading this :).
Im creating a Live chat with PHP and jQuery. Yeah iknow what you'r thinking right now. USE SOCKET.IO. Iknow, and i want to. But first i want to create one with Ajax. So if you are gonna say use websockets or node.js or something it doesnt help me. I just want to fix this.
So my problem.
The chat data will be parsed in a json array on a file.
[{"id":"1","user_id":"2","user_clr":"red","message":"Test bericht","timestamp":"2017-03-09 16:04:34","username":"Vienna"},{"id":"2","user_id":"1","user_clr":"blue","message":"Test berciht 2","timestamp":"2017-03-09 16:04:32","username":"Chris"},{"id":"3","user_id":"2","user_clr":"red","message":"tst bericht 4","timestamp":"2017-03-09 16:04:35","username":"Vienna"},{"id":"4","user_id":"2","user_clr":"red","message":"test bericht 3","timestamp":"2017-03-09 16:04:36","username":"Vienna"},{"id":"5","user_id":null,"user_clr":"sda","message":null,"timestamp":null,"username":null},{"id":"6","user_id":"1","user_clr":"blue","message":"Test","timestamp":null,"username":"Chris"},{"id":"7","user_id":null,"user_clr":null,"message":null,"timestamp":null,"username":null},{"id":"8","user_id":null,"user_clr":null,"message":"TEST","timestamp":null,"username":"TEST"}]
Yes it is a valid JSON.
there are some nulls in it but it doesnt matter.
Im using at this moment this jQuery:
function loadChats(){
$.getJSON('/d.php', function(data) {
console.log(data.length + " keys loaded");
var strVar="";
$( "#view_ajax" ).empty();
$.each(data, function(index) {
strVar += "<div class=\"messenger-message-container\" style=\"color:white;\">";
strVar += " ";
strVar += " <div class=\"messages\">";
strVar += " <ul>";
strVar += " <li>";
strVar += "";
strVar += " <div class=\"message\"><font color=\"black\">";
strVar += "<\/font>";
strVar += " ";
strVar += " <div style=\"background-color:" + data[index].user_clr + ";\">";
strVar += data[index].username + ": " + data[index].message;
strVar += " <\/div>";
strVar += " <\/div>";
strVar += " <\/li>";
strVar += " <div class=\"time-ago\">1:26<\/div>";
strVar += " <\/ul>";
strVar += " <\/div>";
strVar += " ";
strVar += " <\/div>";
});
$('#view_ajax').append(strVar);
});
setTimeout("loadChats()", 1000);
}
loadChats();
Now it is refreshing the whole div. It emptys the html and put the html again into the strVar
, so new data will be included now either.
But what i really want is to load the chat when you open the chat page and then only check if theire is a new row in the database. If so, put a new div on the output page. So the olders message wouldt be loaded again.
How can i realize this?
I tried to read other ajax tutorials about data, but i cant find the right one which is cleared what i want.
----- Added PHP code for answer from: Guillaume STLR
<?php
require_once './core/init.php';
$toxDB = toxDB::getInstance();
$toxData = $toxDB->getAll('chats', 20);
print_r(json_encode($toxData->results()));
this query is running when running this function
object(PDOStatement)[4]
public 'queryString' => string 'SELECT * FROM chats LIMIT 20' (length=28)
and is printing the JSON which i mention above.