Question

I try to learn the magic behind ajax-php configuration so that i tried to implement a code like a clock via php. But, it seems i am still missing something. Here is what i did so far.

HTML(starting the clock when it is clicked)

<div id="bu" onclick="clock()">asccasascascsc</div>

JS

<script type="text/javascript">
 var a = 0;
 function clock() {



     $.ajax({
        type: "GET",
        url: "asd.php",
        data: {  
                'p':a
              },
        dataType: "json",
        cache: false,
        success: function(data) {

            $('#bu').html(data.p);
           setTimeout (clock    (),10000 );
        },
    });

}

 </script>

In here i wanted to replace “bu” with an integer 1 and create a loop to increase that number every 1 second. I know that setTimeout function works only once(I am a liar from where i read it:)) But i am calling it every single time.

PHP(asd.php)

<?php
$asd = $_GET['p'];
$asd++;
$data = array();

$data['p'] = $asd;


echo json_encode($data);
?>

PHP is where i did te increment part.

So, why is it not working? I am only seeing 1 but no more.
Note: I am pretty new as you can see:)

Answer 1

Try the follow:

<script type="text/javascript">
var a = 0;

function clock() {
    $.ajax({
        type: "GET",
        url: "asd.php",
        data: {'p': a},
        dataType: "json",
        cache: false,
        success: function(data) {
            a = data.p;

            $('#bu').html(data.p);

            setTimeout(clock, 10000);
        },
    });
}
</script>

If you want to increase $('#bu') value, you need to increase a, which is what populate $('#bu').html() after each ajax rquest.