Automatic Widget Refresh

Thanks in advance guys. I have already searched enough without results :(

How to refresh page or specific widgets only on a page through ajax/jquery only when changes occur in the database table? If it’s possible, please show me a way to implement it in php or javascript or some other way?.I am using yii framework.Is it possible without using setInterval() or setTimeout() functions in js?

The easiest way is to poll for changes periodically. Use setInterval() to call a JavaScript function. In the function, send a request to the server to check for changes.

To simplify it, you could just replace the widget content on each request instead of worrying about whether it’s changed or not.

thanks for the reply.i have 12 widgets in one page.I used setinterval() for all widgets,the page became heavy.it will take lot of time to load.i am new to js.So is there any problem to use more setinterval() in one page??

Can you show your code? I would use a single setInterval() call, send an AJAX get request to the current URL, then replace the content of each widget from the resulting HTML.

How frequently are you polling?

Sorry, My English is bad,

In a sense, I don’t need this to execute every 3 seconds.i want to execute whenever any changes occurs in database table.I don’t know very deep knowledge about js.Every 3 seconds it sends request to server,will the page become heavy?Is there any other method to implement this??how to know database changes by php??here is the code

setInterval(ajaxCall1, 3000);

setInterval(ajaxCall2, 3000);

setInterval(ajaxCall3, 3000);

setInterval(ajaxCall4, 3000);

setInterval(ajaxCall5, 3000);

setInterval(ajaxCall6, 3000);

setInterval(ajaxCall7, 3000);

setInterval(ajaxCall8, 3000);

setInterval(ajaxCall9, 3000);

function ajaxcall1{

$.ajax({

                url: 'echo_file.php', 


                datatype: 'json',


                success: function(data) {





                    seriesOptions=data;


                    createChart();


                },

}

similiarly code for all other function.

Kindly refer this link

More Explanation here,Actually what i want is to update page like facebook page.If i open facebook in my web browser,the page automatically update whenever any new post added by other friends.how can i achieve this??thanks in advance…

thanks for the reply.But i have lot of div to update in one page.i dont need to update div in every 9 second…i want to update div whenever div related databasetable are updated.

You can’t do that easily in PHP without just polling the server. There’s a technique known as long polling, where you send a request, leaving it open for the server to respond when it’s ready, but you’ll end up maintaining a persistent connection for each person using the site, which is very expensive.

Alternatively, you could look at using a separate service such as PubNub to handle that side of things for you.

Don’t send a separate AJAX request for each widget, that will slow things down. Send a single request, then update all of the widgets from the returned content. Also, polling every 3 seconds is probably unnecessary unless you’re trying to implement some sort of live chat functionality; try lowering the polling rate.

I agree to Keith.

I would refresh the whole page if something has changed in the database.

In you database you can increase a global sequence/counter in a insert/update trigger.

Save this ‘updateCounter’ as js-variable and submit this “updatestate” value in the request in the setInterval() method when checking for page update. Do a document.location.reload if something has changed.

1 Like

There’s no need to reload the page, you can just send a get request to the current URL over AJAX and update the sections with the result. If you reload the page, the user might end up scrolled to the top or they might lose information they’ve typed in.

thanks.i have one chart widget.how to refresh this widget??can you show example code using setinterval().here is my code

<?php

$this->widget(‘dashboard.extensions.google.Academic’, array(‘visualization’ => ‘ComboChart’,

'containerId' =&gt; 'fees', 'cnt' =&gt; 'Totalfee', 'act' =&gt; 'fee',


'options' =&gt; array('vAxis' =&gt; array('title' =&gt; 'Number of Students'),


    'hAxis' =&gt; array('title' =&gt; 'Class'),


   'seriesType' =&gt; 'bars',


    'series' =&gt; array(2 =&gt; array('type' =&gt; 'line')),


)

));

?>