Refreshing div periodically to check if there are new entries in the table

Question

I have created a relatively simple "ideas board" in PHP/jQuery/MySQL.

On page load the div #chat pulls the current entries in the database.

<div id="chat"> <?php $sql = "SELECT * from idea ORDER BY id DESC;"; $result = $pdo->query($sql); if($result->rowCount() > 0 && !empty($result)) { foreach ($result as $row) { $title = $row['title']; $idea = $row['idea']; echo '<span class="idea"><strong>' . $row['title'] . "</strong>&nbsp;-&nbsp;" . $row['idea'] . '&nbsp;<a class="delete" href="">[Delete]</a></span>'; } } ?> </div>

However I'd like it to be refreshed periodically using:

<body onload="setInterval('chat.update()', 1000)">

The below example details how it can be done using a text file, how would I do it with querying a database (the example was found at http://css-tricks.com/jquery-php-chat/)?

//Updates the chat function updateChat() { if(!instanse){ instanse = true; $.ajax({ type: "POST", url: "process.php", data: {'function': 'update','state': state,'file': file}, dataType: "json", success: function(data) { if(data.text){ for (var i = 0; i < data.text.length; i++) { $('#chat-area').append($(" "+ data.text[i] +" ")); } } document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight; instanse = false; state = data.state; } }); } else { setTimeout(updateChat, 1500); } }

I expect certain rows to be deleted as well, so on top of entries being appended, I'd also like some to be removed.

It should simulate a real-time conversation.

You could just set the timeout in the complete callback function of your ajax request — A. Wolff
– A. Wolff, Commented Jul 28, 2013 at 14:15

Konsole · Accepted Answer · 2018-06-01 14:24:16Z

You can use simple long polling technique to update your chat.

eg:

//Updates the chat function updateChat() { if(! instance){ instance = true; $.ajax({ type: "POST", url: "process.php", data: {function: 'update', state: state, file: file}, dataType: "json", success: function(data) { if(data.text){ for (var i = 0; i < data.text.length; i++) { $('#chat-area').append($(" "+ data.text[i] +" ")); } } document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight; instance = false; state = data.state; }, complete: function(){ setTimeout( updateChat, /* Request next message */ 10000 /* ..after 10 seconds */ ); }, error: function(XMLHttpRequest, textStatus, errorThrown){ //display you error message }, timeout: 10000 //Timeout is necessary to prevent chaining of unsuccessful ajax request }); } }

VitaliyG · Accepted Answer · 2013-07-28 14:52:56Z

You can use socket.io library to implement server to client notifications and/or real time communication in both directions.

Collectives™ on Stack Overflow

Refreshing div periodically to check if there are new entries in the table

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related