I have the following table, which is written empty with HTML:
<table>
</table>
I have js/jQuery on client side and PHP on server side which is used for ajax/long polling. I get the table content from server as json and I put the table content with append method (js) to the table. I also get the timestamp (last modification date ) with the json object when I get the content from server. Then I call ajax method again with timestamp and I send back it to server. PHP checks timestamp and puts inside a forever while loop and checks every seconds if new record was inserted into DB or record was modified (comparing the last timestamp in DB with the recevied one from client. If yes, then sends back the content to client with the timestamp and while loop stops. And this process goes again and again between client and server. This is long poll.
The table on client side is editable, so the problem:
The server sends back the content to the client, javascript want to refresh the table (delete every row and paste the rows) AND the user is inside the table and edits data. When this happens the user edited data on client will lost, because the whole table on client side will refresh.
solution would be: Not refreshing the whole table on client, only refreshing the row which was edited by another user, or remove/add only the row/rows without refreshing the whole table. This solution is tricky and it is complicated to compare the 2 json (which I get from server and the which is on client side in table)
Solution would be: Waiting for user to leaving the table with mouse, and when the table is 'free to update' then js will refresh it (remove all rows and paste all which gets from server). The solution can be use with infite while loop on client side with setiterval or settimeout. How would you do it?
Thank you.
I was thinking on second solution:
function TABLEFREE(){
//Returns true if the user is not inside the table
SETTIMEOUT OR SETINTERVAL
}
function GetRowsFromServer(timestamp)
{
$.ajax({
url:"/getrows.php",
method:"POST",
data: {'timestamp' : timestamp},
dataType: "json",
success:function(response){
BEFORE REMOVE THE ROWS IN TABLE
I WANT TO USE INFINITE WHILE LOOP TO CHECK IF USER INSIDE THE TABLE BY CALLING TABLEFREE FUNCTION.
$('.tablerow').remove(); //remove all rows from table (reset)
converting json and paste the datas into table........
GetRowsFromServer(response.timestamp) //calling again the function with the recevied timestamp