Reload Page with Javascript after Database changes

Question

I'm displaying a Table from a Database like so

<tr>
  <td>{{ $user->id }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td>{{ $user->... }}</td>
  <td></td>
</tr>

If something changes in the Database I have to hit F5 in the Browser to Display the changes. Now I want to refresh the Page with Javascript, each time something changes in the Database. I don't want to refresh the page on a time intervall.
I have an Admin who can change someones Status and you can change your status yourself. When someone changes his own status the Admin Backend should refresh.

Do you guys have any ideas on that?

If you're wanting real-time updating then you'll want to look into websockets. — Ben Fortune, Sep 08 '14 at 08:32
What about sending request for example each 30 seconds to a server, where a script will check if there were updates, returns answer to a client and it reloads or not the page. Also you can look at long polling https://github.com/panique/php-long-polling . — heroin, Sep 08 '14 at 08:33
possible duplicate of [How to automatically reload a web page at a certain time?](http://stackoverflow.com/questions/1217929/how-to-automatically-reload-a-web-page-at-a-certain-time) — Anil Bhattarai100, Sep 08 '14 at 08:41
I'm quiet new to Javascript so Websockets are not so optimal for me as a beginner, but thanks for your suggestion. I think I will try the Long-Polling or Short-Polling Method. Thanks for your answer! — jrenk, Sep 08 '14 at 08:48

score 1 · Accepted Answer · answered Sep 08 '14 at 08:47

The easiest way (which has already been mentioned) would be to reload the page every x seconds.

This means however, that if the user is browsing / editing anything on the page, he only has x seconds to finish this before all the progress is lost.

You could use AJAX to check the database for changes however:

Make a DB-Check.php script that outputs the latest database entry
In your main file, include an AJAX script which pulls the DB-Check.php every 30 seconds
Put the output from the DB-check.php in a new JS variable
If the new variable is different from the old variable, refresh the whole page (Or use AJAX to load the rest of the database)

I assumed you were using PHP :) Of course it should work with other languages too. — Benjamin Rasmussen, Sep 08 '14 at 08:51

score 1 · Answer 2 · answered Apr 13 '20 at 10:22

1

Fetch the data from database using ajax after some time interval.

Loop through the fields you got from DB and compare with current fields in page.

If you find any changed then update it on the front end with the data you've already fetched.

answered Apr 13 '20 at 10:22

Alex09

11
1

score 0 · Answer 3 · edited May 23 '17 at 12:34

0

location.reload();

this is the javascript function to reload the current page. You can use this function inside the js function when do you want this.

this Question is a bit very large, so if you want the correct answer according to your scenarios please describe your detail scenarios.

you may be looking for like this How to automatically reload a web page at a certain time?

edited May 23 '17 at 12:34

Community

1
1

answered Sep 08 '14 at 08:33

Anil Bhattarai100

693
7
32

score 0 · Answer 4 · answered Sep 08 '14 at 08:36

0

The easiest solution is to refreshing the page automatically in second. So, please add this inside the head:

<meta http-equiv="refresh" content="30" />

to refresh it every 30 seconds. Others ways are by javascript:

setTimeout('window.location.reload();', 30000);

or

setTimeout('history.go(0);', 30000);

or

setTimeout("location.reload(true);", timeoutPeriod);

answered Sep 08 '14 at 08:36

Nyi Ma Lay Win Lae Aye

6,250
2
13
10

1

I don't want to refresh it after time as I said in my Question. – jrenk Sep 08 '14 at 08:41

score 0 · Answer 5 · answered Sep 08 '14 at 08:49

I would do this using very primitive API. jQuery (or JS) makes request to API url which returns boolean, and using this boolean, true would trigger refresh page. (or even better- change content without with jQuery without refreshing) that would be my approach.

score 0 · Answer 6 · edited Sep 12 '21 at 20:44

0

 // AJAX Request
            $.ajax({
                url: 'remove.php',
                type: 'POST',
                data: { id:id },
                success: function(response){
    
                    if(response == 1){
                        // Remove row from HTML Table
                        $(el).closest('div').css('background','tomato');
                        $(el).closest('div').fadeOut(800,function(){
                            $(this).remove();
                        });
                     location.reload();   
                    }else{
                        alert('Invalid ID.');

edited Sep 12 '21 at 20:44

PM 77-1

12,933
21
68
111

answered Sep 12 '21 at 16:28

Vasyl Lukanych

3
3

2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 12 '21 at 17:37

Reload Page with Javascript after Database changes

6 Answers6

Linked