Dynamic update without page refresh

2

Personal oops, all right?

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

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

I tried to look for something like this, but for now I did not find anything. The languages I am using are: PHP (database), JSON (pass the infos from the database to the site), 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 website etc. I just could not do these dynamic updates and notification system, no need to refresh.

Can anyone help me with this? How to begin? Any referral link for me to learn this? I know a bit of 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);

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

    
asked by anonymous 16.03.2015 / 15:23

1 answer

5

Hello. You're on the right path so I'll be objective. There are several ways to achieve this result. The code you are using is incomplete, so it does not work, you have to bring the new result and add it to the table. Here is an example:

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

            function check() {

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

                    /*
                     1 - Se existir faz 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; 
                     */

                });

            }

Okay. Now we have a time loop record checker that will add the new record to the table. You can supplement the feature by adding the warning / notification feature. There are several plugins in jQuery. In this link, you will find more than 35 options to fit your project: link

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

Everything will depend on how your project is being developed. I do not know if you have a user activity table to know if the order has already been viewed or not. You need to work out a way to compare and detect this new record.

Good luck!

    
20.04.2015 / 19:55