Trying to update jquery variables using mysql and php

Question

I am trying to make a Charity counter using jquery, php and mysql. I am trying to grab new values from mysql using php every 5 seconds without updating the page using 'window.setInterval()', but my problem is that it isnt grabbing new values but it keeps using the values it got at the start. so here' s the code, i hope some is able to help :).

window.setInterval(function(){
    var needed = <?php echo neededGetFirst(); ?>;
    var got = <?php echo gotGetFirst(); ?>;
    console.log('needed: ' + needed);
    console.log('got: ' + got);
    var gaugeHeight = 223;
    var gaugeBottom = 318;
    var percent = (100 / needed) * got;
    var heightOffset = (gaugeHeight / 100) * percent;
    var bottomOffset = gaugeBottom - (gaugeHeight - heightOffset);

    $('#gauge').animate({
         height: heightOffset + 'px',
         bottom: bottomOffset + 'px'
    }, 1000);

    for (var i = 2, limit = 7; i < limit; i++) {
         var value = (needed / 5) * (i - 1);
         $('#stamp' + i).text(value);
    };
}, 5000);

EDIT

Is it possible to return the value from a file with some type of GET/RUN? by putting the php/mysql database functions in an file and use a return for the values.'

EDIT 2

The php code used in the file:

<?php
  $pdo = new PDO('mysql:host=127.0.0.1;dbname=thermometer', 'root', ''); 
  $sql = 'SELECT `got`.`value` AS got, `needed`.`value` AS needed FROM `needed`, `got`'; 
  $statement = $pdo->prepare($sql);
  $statement->execute();
  $result = $statement->fetchAll(PDO::FETCH_ASSOC);
  $json = json_encode($result );
  echo($json);
?>

You want to access a server side value (Votes got) in the window.setInterval, you need to use AJAX for this. Your current code will ofcourse use the values it got at the beginning, because you are echoing the "got" value on page load, there is no piece of code that is refreshing that value. — Ananth
– Ananth, Commented Dec 6, 2014 at 16:21

James Hibbard · Accepted Answer · 2014-12-07 09:28:14Z

1

As has been mentioned, to update the page with new values every however many seconds, you will need some kind of interaction with the server, probably via AJAX.

Here's an example of how you could do that:

function getNewValues(){
  return $.ajax({
    url: 'submit.php',
    type: 'POST',
    dataType: 'json',
    cache: false
  });
}

window.setInterval(function(){
  getNewValues()
  .success(function(data) {
    var needed = data["needed"],
        got = data["got"];

    var gaugeHeight = 223;
    var gaugeBottom = 318;
    var percent = (100 / needed) * got;
    var heightOffset = (gaugeHeight / 100) * percent;
    var bottomOffset = gaugeBottom - (gaugeHeight - heightOffset);

    $('#gauge').animate({
      height: heightOffset + 'px',
      bottom: bottomOffset + 'px'
    }, 1000);

    for (var i = 2, limit = 7; i < limit; i++) {
      var value = (needed / 5) * (i - 1);
      $('#stamp' + i).text(value);
    };
  })
  .fail(function() {
    console.log("An error ocurred");
  });
}, 500);

Now, every five seconds a request will fire to the server and retrieve the latest values.

You will have to adjust your PHP script to return some simple JSON:

{
    "needed": needed_value,
    "got": got_value
}

Maybe something like:

<?php
  $pdo = new PDO('mysql:host=host;dbname=db_name', 'user', 'pass'); 
  $sql = 'SELECT needed, got FROM table'; 
  $statement = $pdo->prepare($sql);
  $statement->execute();
  $result = $statement->fetch();
  $json = json_encode($result );
  echo($json);
?>

Although this isn't tested, it should hopefully point you on the right path.

edited Dec 7, 2014 at 9:28

answered Dec 6, 2014 at 16:43

James Hibbard

17.8k14 gold badges69 silver badges76 bronze badges

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

10 Comments

Thaillie Over a year ago

Is it possible to use a left join on this? if so, could you write an example? becouse the server querry works but i have to grab data from 2 different tables

James Hibbard Over a year ago

You must be getting the data anyway, as you are outputting it on the page. Just use what you have.

Thaillie Over a year ago

Im getting the error: TypeError: got is undefined, and the echo from the file: [{"got":"1235.00","needed":"4350"}]

James Hibbard Over a year ago

Change your code to: var newValues = getNewValues(); console.log(newValues); What does that output?

Thaillie Over a year ago

newValues gives back undefined, and the data that being returned in the function: Array [ Object ].

|

Collectives™ on Stack Overflow

Trying to update jquery variables using mysql and php

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related