Dynamic update without refreshing page

Question

Whoa, everybody, all right?

Next, I’m doing an administrative area and would like the content to update dynamically without the need to refresh the page to see if there’s anything new. For example, if the administrator is on the order page and enters a new request, I would like the table to already update and display this new request, without having to load the page to see if you have something new.

Or if you are not on the order page, a notification would appear, as you have here on stackoverflow or facebook, etc..

I tried looking for something like this, but I haven’t found anything yet. The languages I’m using are: PHP (database), JSON (pass the database to the website), Jquery/AJAX to make things dynamic and HTML/CSS.

I have the functional codes to read the DB, create the JSON, write the tables on the site etc.. I just couldn’t make these dynamic updates and notification system, no need for refresh.

Can anyone help me with this? How to get started? Any reference links for me to learn this? I know a little Jquery/Ajax, but nothing advanced.

Thank you.

Edit: I’ve been searching and found this code in Jquery:

var $container = $("#mytable");
var refreshId = setInterval(function()
{
    $container;
    console.log("loaded");
}, 10000);

However it is not working. It loads the div, the console shows that it has been loaded, but the table does not update with the new values.

Answer 1

Hello. You are on the right track so I will be objective. There are several ways to achieve this result. The code you are using is incomplete, so it doesn’t work, you have to bring the new result and add it to table. Here is an example:

            var container = $("#mytable");
            var refreshId = setInterval(function(){ check(); }, 10000);

            function check() {

                $.getJSON("result.json", function(data){

                    console.log(data);

                    /*
                     1 - Se existir adiciona na tabela e exibe o alert
                     container.append('<tr><td>#001</td><td>exemplo</td></tr>');


                     2 - Se não existir apenas retorna falso;
                     return false; 
                     */

                });

            }

Ok. Now we have a time loop log checker that will add the new record to the table. You can complement the function by adding the warning/notification feature. There are several plugins in jQuery. In this link, you will find more than 35 options to suit your project: http://www.jqueryrain.com/demo/jquery-notification-plugin/

Well, now we have the question of checking the new records, a simple solution is to pass a $_SESSION in PHP for when to perform the check query (setTimeinterval) that will run getJSON in PHP to know if the found result is really new or not.

Everything will depend on how your project is being developed. I do not know, if you have a table of activity of the users to know if you have already seen the order or not in order. You need to devise a way to compare and detect this new record.

Good luck!