Periodically refreshing the table view without reloading the page

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
a.gneady
Site Admin
Posts: 1024
Joined: 2012-09-27 14:46
Contact:

Periodically refreshing the table view without reloading the page

Post by a.gneady » 2018-10-14 14:51

An AppGini user sent me an interesting question, and I wanted to share the answer here. Here is his question:
I need to refresh the table view, but without blinking, as currently setInterval is very anoying. Is there any way to AJAX load the table view, or do you have any suggestion (Use case : the table view is used on a big screen, there is 5 tablets who "post" to the big screen. so everytime somebody insert a new record it is visible on the big screen.)
A very simple solution is to use jQuery .load() method ... Add the following code to the hooks/tablename-tv.js file (where tablename is the name of the concerned table -- create the file if it doesn't already exist in hooks):

Code: Select all

$j(function(){
    setInterval(function(){
        $j('table').parent().load('tablename_view.php table');
    }, 10000);
})
Replace tablename in the above code with the actual name of the table, and optionally change 10000 to the number of milliseconds between reloads -- or leave it to reload the table every 10 seconds. This will update the table with any new records every 10 seconds without reloading the whole page or flickering the screen.
:idea: Learn all the tips and tricks of customizing AppGini apps through our online course.

:arrow: Mass Update plugin: Update multiple records at once and improve your workflow efficiency.

:arrow: Summary Reports plugin: Build powerful reports and charts for your AppGini apps.

:arrow: Search Page Maker: Compose user-friendly yet powerful search pages for your AppGini apps.

User avatar
a.gneady
Site Admin
Posts: 1024
Joined: 2012-09-27 14:46
Contact:

Re: Periodically refreshing the table view without reloading the page

Post by a.gneady » 2018-10-15 17:47

Update: Let's say you want to perform some operation after reloading the table view (for example, highlight rows or cells matching some criteria), you could pass a callback function as the 2nd parameter to load() as shown below:

Code: Select all

$j(function(){
    setInterval(function(){
        $j('table').parent().load('tablename_view.php table', function(){
        	// do something after reloading the table view
        });
    }, 10000);
})
One last thing. If you wish to apply some filter(s), sorting, .. etc, you could modify the link you're loading by adding one or more parameters. For example:

Code: Select all

$j(function(){
    setInterval(function(){
        $j('table').parent().load('tablename_view.php?SortField=5&SortDirection=desc table', function(){
        	// do something after reloading the table view
        });
    }, 10000);
})
For a detailed explanation of accepted URL parameters, please see https://bigprof.com/appgini/help/advanc ... parameters
:idea: Learn all the tips and tricks of customizing AppGini apps through our online course.

:arrow: Mass Update plugin: Update multiple records at once and improve your workflow efficiency.

:arrow: Summary Reports plugin: Build powerful reports and charts for your AppGini apps.

:arrow: Search Page Maker: Compose user-friendly yet powerful search pages for your AppGini apps.

User avatar
dnaorem
Posts: 19
Joined: 2018-10-16 16:06
Location: Imphal, Manipur, India
Contact:

Re: Periodically refreshing the table view without reloading the page

Post by dnaorem » 2018-11-03 15:38

Fantastic!
Thanks Ahmad sir,
This is very useful. :D

With regard,
Debenkumar Naorem
With regard,
Debenkumar Naorem

G Belgrado
Posts: 23
Joined: 2017-03-12 09:24

Re: Periodically refreshing the table view without reloading the page

Post by G Belgrado » 2019-05-29 08:05

I have a problem.
The function works perfectly with the table, but if you open the form to insert a new record or modify a record, clicking on a datetime picker field, after the seconds elapsed for the refresh, the table appears instead of the datetime picker and the form is emptied

User avatar
a.gneady
Site Admin
Posts: 1024
Joined: 2012-09-27 14:46
Contact:

Re: Periodically refreshing the table view without reloading the page

Post by a.gneady » 2019-05-30 15:56

Well .. seems the datepicker is using an HTML table, and thus the refresh code selects it incorrectly. So the fix is to make the selector more specific .. So, instead of:

Code: Select all

$j('table')
Try:

Code: Select all

$j('.table_view table')
:idea: Learn all the tips and tricks of customizing AppGini apps through our online course.

:arrow: Mass Update plugin: Update multiple records at once and improve your workflow efficiency.

:arrow: Summary Reports plugin: Build powerful reports and charts for your AppGini apps.

:arrow: Search Page Maker: Compose user-friendly yet powerful search pages for your AppGini apps.

G Belgrado
Posts: 23
Joined: 2017-03-12 09:24

Re: Periodically refreshing the table view without reloading the page

Post by G Belgrado » 2019-05-30 17:13

It works perfectly now
thank you so much
Ahmed

Post Reply