How to Reload JSONObject Content

Question

The code below generates json data dynamically from the database. When the data is generated it adds it to a specific div. How can i make the contents of JSONObject reload every 30 seconds. This will make it so that content shows changes in near real-time.

<script>

JSONObject = <?php echo include_once('../includes/dashboard-stats.php'); ?>;

document.getElementById("today_visits").innerHTML=JSONObject.todayVisits;

</script>

Below is the output of JSONObject = <?php echo include_once('../includes/dashboard-stats.php'); ?>;

JSONObject = {"todayEarnings":"2.60","todayVisits":"212","todayClicks":"36","todayLeads":"3","todayCalculateCR":"12%","todayEPC":"0.08","todayCTR":"17%","yesterdayEarnings":"0.40","yesterdayClicks":"35","yesterdayVisits":"148","yesterdayLeads":"1","yesterdayCalculateCR":"35%","yesterdayEPC":"0.03","yesterdayCTR":"24%","monthEarnings":"3.00","monthClicks":"75","monthVisits":"392","monthLeads":"4","monthCalculateCR":"19%","monthEPC":"0.05","monthCTR":"19%"}

    1;

I tried using this to try and reload the json data.

<script>
 function load(){
JSONObject = <?php echo include_once('../includes/dashboard-stats.php'); ?>
document.getElementById("today_visits").innerHTML=JSONObject.todayVisits;
 setTimeout("load()",9000);
      }
</script>

Your last code looks code, only you need to make a proper ajax call without any PHP stuff — kero
– kero, Commented Apr 22, 2014 at 13:44
Why did you tag this with jquery? If you use jquery, check out its ajax functions. — jeroen
– jeroen, Commented Apr 22, 2014 at 13:50

InventorX · Accepted Answer · 2014-04-23 07:28:41Z

2

Your PHP code Runs only One type Thats Why Result show Same. Use Ajax Call and Get New Data from DB through PHP FILE every 30 Second.

//Jquery Syntax

$.post("Your PHP SCRIPT FILE PATH HERE", { PARAMS you want to pass }, function( Get DATA FROM PHP FILE ) {

// HERE IS YOU Operation

},"DATA FORMAT");

==================================

//CODE Example

function loadStats(){
 $.post( "../includes/dashboard-stats.php", { get:"stats" }, function(data) {
    $("#today_visits").html(data.todayVisits);
 }, "json");
}
$(function(){
     loadStats();
    setInterval(loadStats,9000);
}):

edited Apr 23, 2014 at 7:28

answered Apr 22, 2014 at 14:08

InventorX

3782 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr Johnson Over a year ago

How can i prevent that 9sec delay before data shows for first time. On page load its blank for 9 secs before i see the data

Susheel Singh · Accepted Answer · 2014-04-23 07:20:27Z

1

UPDATED THE ANSWER:

<script>      
   function load() {
        var colors = ["#CCCCCC","#333333","#990099"]; 
        var rand = Math.floor(Math.random()*colors.length); 

        $.getJSON("../includes/dashboard-stats.php", { get:"stats" },function(data) {
             $("#today_visits").fadeOut().fadeIn().html(data.todayVisits).css("background-color", colors[rand]);
        });
    }
    $(function() {
        load();//on the page load.
        setInterval(load,9000);
    });
</script>

the url to ../includes/dashboard-stats.php is relative to the location of the page on which the script it present

edited Apr 23, 2014 at 7:20

answered Apr 22, 2014 at 13:46

Susheel Singh

3,8546 gold badges34 silver badges69 bronze badges

3 Comments

kero Over a year ago

Won't work because the PHP gets executed once and so it will get "updated" every x seconds with the same content

jeroen Over a year ago

+1 Although personally I would set a timeout in the callback function instead of using an interval. Just to be safe.

Mr Johnson Over a year ago

How can i add a fadein effect and also different background color when it changes?

Community · Accepted Answer · 2017-05-23 12:20:47Z

0

With the jQuery library, we can do something like;

setInterval(load, 5000);

function load() {
  $.get('../includes/dashboard-stats.php', function(ReturnData) {
    JSONObject = ReturnData
  });
}

Create a loop with setInterval
Within the function load, create an ajax request to get the data.

ReturnData holds the output (HTML) of what is generated when ../includes/dashboard-stats.php is triggered - try run it in your browser, and then find where the data is you're wanting to use.

Edits

Removed "load()" from line 1 after Moonwave comment

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Apr 22, 2014 at 13:53

ʰᵈˑ

11.4k3 gold badges31 silver badges50 bronze badges

2 Comments

moonwave99 Over a year ago

Should be setInterval(load, 5000);, w/o braces.

Mr Johnson Over a year ago

I added this to my site and i see no data

Collectives™ on Stack Overflow

How to Reload JSONObject Content

3 Answers 3

1 Comment

3 Comments

Edits

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Edits

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related