js counter not displaying in php

Question

I do not understand why I am not seeing each number diaplyed in the div.

My code...

<head>
    <script>
        function countit(i)
        {
            document.getElementById('counter').innerHTML = i;
        }
    </script>
</head>
<body>

<div id="counter"></div>

<script>countit(1)</script>
<?php sleep(1); ?>
<script>countit(2)</script>
<?php sleep(1); ?>
<script>countit(3)</script>

</body>

I have a php script which process several records from a database and I want to display a counter of the current recod being processed. I thought JS was the way to do that. I saw something very similiar to the code above recommended on so.

Any insight would be greatly appreciated.

first of all, you're mixing server-side and client side scripting. That makes you confused. — V-X, Feb 27 '13 at 20:47

score 2 · Answer 1 · edited May 23 '17 at 12:21

2

PHP buffers the output and doesn't send the page until it has finished running. The sleeps do not run between execution of script elements.

Rewrite your logic to use a JavaScript setInterval instead.

Alternatively, disable or avoid output buffering in your PHP script, but note that this is likely to have implications on the ability of browsers to cache your page.

edited May 23 '17 at 12:21

Community

1
1

answered Feb 27 '13 at 20:35

Quentin

914,110
126
1,211
1,335

The 'sleeps' are just there so I could see the count changing. I want to execute the js function from different places in my php code, ie: after processing x number of records, call teh js function and update the count. I will investigate disabling output buffering and see where that leads me. – Ken Roberts Feb 27 '13 at 20:39
@user2076615: `execute the js function from different places in my php code`. It doesn't work that way. PHP is ran *before* the browser even sees the JavaScript. – gen_Eric Feb 27 '13 at 20:42

score 0 · Answer 2 · answered Feb 27 '13 at 20:36

The problem is your php code executes on your server, while you need code to execute on the client (JavaScript) for this to work:

<script>
  var idx = 1;
  var doCount= function(){
      if(idx >= 3) return;
      countit(idx);
      setTimeout(doCount,1000);         
  };
  doCount();


</script>

remove the following:

<?php sleep(1); ?>
<script>countit(2)</script>
<?php sleep(1); ?>
<script>countit(3)</script>

score 0 · Accepted Answer · answered Feb 27 '13 at 20:37

0

PHP is a server side language, while Javascript is client side. I'm guessing you are simply seeing 3 in you counter div. The reason is because the PHP sleep(1) is happening before the page is even rendered. You need use a setInterval in Javascript to accomplish what you are trying to do.

answered Feb 27 '13 at 20:37

WhoaItsAFactorial

3,538
4
28
45

ok. maybe I am taking the wrong appraoch to this. If I have a php script that is processing a large table and taking quite some time (minutes actually), how can I display a counter on the page to let the user know where they are in the process? – Ken Roberts Feb 27 '13 at 20:46
1

AJAX is what you need to be using for that. – WhoaItsAFactorial Feb 27 '13 at 20:48
That sounds like what I need. Off to research. Thank you very much. – Ken Roberts Feb 27 '13 at 20:56

score 0 · Answer 4 · answered Feb 27 '13 at 20:46

Your code waits 2 seconds and the browser receives:

<head>
    <script>
        function countit(i)
        {
            document.getElementById('counter').innerHTML = i;
        }
    </script>
</head>
<body>

<div id="counter"></div>

<script>countit(1)</script>

<script>countit(2)</script>

<script>countit(3)</script>

</body>

that's probably not what you want. let's try something like this:

<script>
    var i = 1;
    function counter()
    {
       if (i < 4)
       {
         countit(i);
         i++;
         window.setTimeout(counter,1000);
       }
    }

    counter();
</script>

js counter not displaying in php

4 Answers4