Using Jquery in Codeigniter app to update div every 10 seconds

Question

I'm fooling around with a codeigniter 2.X app and I'm trying to use the following Jquery code to update a number every 10 seconds in my view.

<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_score').load('<?php echo $FighterOneScore; ?>').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds

</script>

And this is my div tag in my view

<div id="load_score"> </div>

UPDATE

Here is my controller code

public function left()
{
    $this->load->model('points');
        $data['ScoreOne'] = $this->points->get_ScoreOne();
        echo $data['ScoreOne'];
}

    public function right()
{
    $this->load->model('points');
        $data['ScoreTwo'] = $this->points->get_ScoreTwo();
        echo $data['ScoreTwo'];
}
}
?>

Here is the Javascript I have in My VIEW:

<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$.get("<?php echo base_url(); ?>response/left",
function(data){ $("#load_score").html($data); } // not sure about fadeIn here!
);
}, 10000); // refresh every 10000 milliseconds

</script>

When I load my view in the browser - The page shows nothing.

I believe .load expects you to input a url instead of a script. Put the echo statement in a php file and load that file. — Eugene H, Aug 08 '12 at 17:25
Your error results from a misunderstanding of the server-client concept. I suggest you do some research on it. But just to point your mistake - you assume that after the page loads on the client, the php variable `$FighterOneScore` will keep updating. Which is incorrect, since php runs on the server side, not on the client side. — EyalAr, Aug 08 '12 at 17:34
thanks for the advice! I'll look into this and report back with my findings! — Oakin, Aug 08 '12 at 18:18

score 1 · Accepted Answer · answered Aug 08 '12 at 17:29

1

How you can do this is,

<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$.get("<?php echo base_url(); ?>sampleController/sampleData",
function(data){ $("#load_score").html($data); } // not sure about fadeIn here!
);
}, 10000); // refresh every 10000 milliseconds

</script>

And, in php, create a controller sampleController with a method sampleData

that will do:

echo $FighterOneScore;

answered Aug 08 '12 at 17:29

Prasanth

5,230
2
29
61

Thanks for the help - It helped, but I now have a new issue. The JavaScript I am using is crashing my view. I updated the my original question with my controller code as well as my view code. Sorry, I am just learning. – Oakin Aug 08 '12 at 22:17

score 0 · Answer 2 · answered Aug 08 '12 at 17:27

0

In your load call, you're not actually calling a page. You're echoing out some value from php.

You need the parameter to load to be a URL to a controller that echoes out the score.

answered Aug 08 '12 at 17:27

swatkins

13,530
4
46
78

Using Jquery in Codeigniter app to update div every 10 seconds

2 Answers2

Linked