javascript - Change the type of update of a tank

Question

I've been working with a tank from github. https://github.com/AppeonixCreativeLab/waterTank and in the part that makes the update i cannot find a way to change the form of update, like instead of clicking, just wait 5 seconds and load again, im trying something like this

 $(document).ready(function() {
        $('.tanque1').waterTank({
            width: 100,
            height:100,
            color: '#72bddb',//color de nuestro liquido
            level:  <?php echo $dato?>,
            tamano:3// tama?o tanque
    });
});
setInterval(function () {
//this function is activate when click and is a number in it
        $('.tanque1').waterTank(<?php echo $dato?>);
            }, 5000);

The autor uses something like this for this purpose but by clicking,

$('.waterTankHere1').waterTank({
    width: 420,
    height: 360,
    color: '#8bd0ec',
    level: 83
}).on('click', function(event) {
//this function is activate when click and it has a number in it
        $(this).waterTank(Math.floor(Math.random() * 100) + 0 );
    });

There could be a way to make that the tank make the update by time by changing just the click event for something else ? The data came from a MySQL database, help

question from:https://stackoverflow.com/questions/66055355/change-the-type-of-update-of-a-tank

Answer 1

Hi welcome to stackoverflow.

The problem with the code example is that once it's loaded the value won't be updated.

setInterval(function () {
//this function is activate when click and is a number in it
        $('.tanque1').waterTank(<?php echo $dato?>);
            }, 5000);```

Previous code will render from the server as:

setInterval(function () {
//this function is activate when click and is a number in it
        $('.tanque1').waterTank(50); // or whatever value from the server
            }, 5000);```

The function will be called from your code every 5 seconds but it will always render 50. You can use chrome developer tools to verify it.

If you want to get the value from the server, I'd recommend exposing an endpoint to just get the value. Since you are already using jQuery you can call that endpoint with $.get.