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
– V-X, Commented Feb 27, 2013 at 20:47

Community · Accepted Answer · 2017-05-23 12:21:31Z

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, 2017 at 12:21

CommunityBot

11 silver badge

answered Feb 27, 2013 at 20:35

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

2 Comments

Ken Roberts Over a year ago

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.

gen_Eric Over a year ago

@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.

WhoaItsAFactorial · Accepted Answer · 2013-02-27 20:37:02Z

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, 2013 at 20:37

WhoaItsAFactorial

3,5484 gold badges31 silver badges47 bronze badges

3 Comments

Ken Roberts Over a year ago

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?

WhoaItsAFactorial Over a year ago

AJAX is what you need to be using for that.

Ken Roberts Over a year ago

That sounds like what I need. Off to research. Thank you very much.

Justin Bicknell · Accepted Answer · 2013-02-27 20:36:26Z

0

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>

answered Feb 27, 2013 at 20:36

Justin Bicknell

4,81620 silver badges27 bronze badges

Comments

V-X · Accepted Answer · 2013-02-27 20:46:17Z

0

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>

answered Feb 27, 2013 at 20:46

V-X

3,05921 silver badges30 bronze badges

Collectives™ on Stack Overflow

js counter not displaying in php

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related