Javascript variable not updating from PHP

Question

How can I get a variable in my javascript function to update every time the script is ran? The variable grabs a PHP string, which it then seems it stores it and doesn't update the value ever till a page refresh is done.

SCRIPT:

setInterval(function () {
        var options = {
            useEasing : true, 
            useGrouping : true, 
            separator : ',', 
            decimal : '.', 
        };
        var value123 = <?php echo $amount22; ?>;
        var value234 = <?php echo $unpaidbtc; ?>;
        var demo = new CountUp("counter", value123, value234, 10, 1, options);
        demo.start();
      }, 5000);

Basically it grabs the $unpaidbtc value for my php in the page. This script will run every 5 seconds, but instead of updating with the new value the php has, it uses the first value it grabbed and never updates to the new PHP string.

Is there anyway to make the script update and re grab the PHP script from the page automatically?

Example: $unpaidbtc = 10 on start and $unpaidbtc = 15 after 5 seconds, but counter only goes up to 10. How can it grab the new value without refreshing the page and stuff, thanks!

"Never have worked with that" --- now as you have a keyword, spend few minutes and make a research. — zerkms
– zerkms, Commented Jul 18, 2017 at 0:09
@ObsidianAge - That example requires jQuery, though. If it's not already included in the OP's project, there's no need to include it just to make a simple Ajax call. It's literally 8 rows of code if you go with native js... — M. Eriksson
– M. Eriksson, Commented Jul 18, 2017 at 0:12
Even though it sounds trivial - updating a counter - it's not. You have to determine where you want to save this counter. You can save this counter in a cookie/local storage, or you can save this on your server (with a file or database). Saving the counter on the client's computer means when you move to another computer the counter is different. If you save the counter on the server, everyone will see the same counter - but they will also all be able to modify the counter. You could also have different counters for different users. You should probably give us more info about this. — Dave Chen
– Dave Chen, Commented Jul 18, 2017 at 0:22
There is no even a single mention of "animation" in the question. Could you update the question so that it addressed the real problem? — zerkms
– zerkms, Commented Jul 18, 2017 at 0:36

Dave Chen · Accepted Answer · 2017-07-18 00:52:49Z

1

From the comments I think I understand what you want:

var ajax = new XMLHttpRequest();

function getValues(callback) {
    ajax.abort();

    ajax.open("GET", "index.php?showme=1", true);
    ajax.send();

    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200)
            callback(JSON.parse(ajax.responseText));
    };
}

setInterval(function() {
    var options = {
        useEasing: true,
          useGrouping: true,
          separator: ',',
          decimal: '.',
    };

    getValues(function(obj) {
        var value123 = obj.amount22;
        var value234 = obj.unpaidbtc;
        var demo = new CountUp("counter", value123, value234, 10, 1, options);
        demo.start();
    });

}, 5000);

You can get away with only using one PHP page, let's assume it's called index.php:

<?php

//do your database calls to get $amount22 and $unpaidbtc

if (isset($_GET['showme'])) {

    echo json_encode(array(
        'amount22'  => $amount22,
        'unpaidbtc' => $unpaidbtc
    ));
    exit;
}

//the rest of your page (with the html/javascript)

Note that if your page is not called index.php, you need to change this line:

ajax.open("GET", "index.php?showme=1", true);

edited Jul 18, 2017 at 0:52

answered Jul 18, 2017 at 0:45

Dave Chen

11k8 gold badges42 silver badges72 bronze badges

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

4 Comments

TymeBomb Over a year ago

This is what I want, but is there anyway to convert the php string to json from the same file and read it from that file too instead of using that external php file? Could I use # for it?

Dave Chen Over a year ago

Yup, you can put everything into one page. I've edited to show how.

Dave Chen Over a year ago

The # sign, if I'm understanding correctly, is used only for client sided navigation, i.e page.php#hello - PHP can't read this value. I've used index.php?showme=1 to only show the values in JSON.

TymeBomb Over a year ago

Thank you for your time and effort, I have found a way to work this how I needed!

Collectives™ on Stack Overflow

Javascript variable not updating from PHP

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related