is progress bar possible with php and javascript using ajax

Question

I was wondering how to make progress bar like gmail.

I tried

<script src="jquery.js"></script>
<script>
$(function (){
    $.ajax({
        url: 'index.php',
        success: function(data) {
            $('#bar').html(data);
        }
    });
})
</script>
<div id="bar"></div>

And on index.php

[EDIT]: by sleep() i just meant to simulate continuous stream of output like multithreaded programs which is not supported in php.

<?php

for($i=0; $i<=10; $i++)
{
    sleep(1);
    echo "$i";
}

it seems that output is echoed out at once so i get result 012345678910 at once.

also i tried

setInterval(function (){
        $.ajax({
            url: 'index.php',
            success: function(data) {
                $('#bar').html(data);
            }
        });
    }, 1000);

Instead, i had trouble maintaining value of 'progress', so i did

<?php

session_start();

if(isset($_SESSION['value'])){
    if($_SESSION['value'] >= 10)
    {
        unset($_SESSION['value']);
    }
    else
    {
        $_SESSION['value']++;
    }
}
else
{
    $_SESSION['value'] = 0;
}

echo $_SESSION['value'];

as part of my php. But it seems that, i am calling ajax function on continuous interval.

My Question is,

How does google use progress bar, while loginng in gmail. Do they get continuos 'stream' of data like i tried on my first example or send (regularly) request on some url (though not through ajax .. through JSONP or whatever) and upadate the page like second ?
Can I do same with php , even if not with php, can I do it using javascript and other server side scripting language where multithreading is supported?

You should add type="text/javascript" to your script tags. — ThiefMaster
– ThiefMaster, Commented Apr 22, 2011 at 7:57
That's why it was a comment and not an answer - it's just something to improve your code. — ThiefMaster
– ThiefMaster, Commented Apr 22, 2011 at 8:09

Jani Hartikainen · Accepted Answer · 2011-04-22 07:21:55Z

9

I'm not sure what exactly Gmail does for the progressbar, but you can achieve something similar in PHP, although it may be a bit tricky.

First, to explain why your examples don't work:

If you echo and sleep, like your first example, it will never work. Ajax performs a full request - that is, if the response does not finish, it will wait. When you loop and sleep, the request is not "closed" until the PHP script has finished executing.

If you use session, like in the other example, the problem becomes the session store. The store is typically locked during script execution, and it will not update itself to allow for the type of progress check you want.

What you could do is write progress to a file (or to a database) manually. For example:

file_put_contents('progress.txt', 1);

Then, have another script read the file and output the contents.

This should work, because file_put_contents opens, writes and closes the file.

Using some other language than PHP would make it easier. Being multithreaded would possibly make it easier, but is not a requirement. However, having a continuously running process would make it simpler (PHP only runs a process for the duration of your request and then exits)

answered Apr 22, 2011 at 7:21

Jani Hartikainen

43.4k11 gold badges70 silver badges87 bronze badges

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

1 Comment

hasExams Over a year ago

well, i ment to store the progress in session ... perhaps multithreaded will be better option. still your idea was appreciable.

Sourav · Accepted Answer · 2011-04-22 07:39:33Z

3

run your jquery code at an interval, and use PHP to print the progress percenage and draw the bar then.

so it will be something like

<script>
function bar()
{
 var v=getProgress(...);
 setTimeout("bar()",1000);
 drawBar();
}

function drawBar(l)
{
 //set div's length to l
}
</script>

EDIT 2

<?php
/* get the request and calculate the job completion percentage and echo it !  */
?>

edited Apr 22, 2011 at 7:39

answered Apr 22, 2011 at 7:12

Sourav

17.6k36 gold badges109 silver badges163 bronze badges

4 Comments

hasExams Over a year ago

my question is not drawing the bar, but how to get this progress percentage from php ? is it like the first way ... or the second ? the first one does not work, but will it work for other languages like python and jsp or not ?

Sourav Over a year ago

i think you are trying to do it in a wrong way, if you use sleep it sleeps before showing the complete output so you get 123..10 after 10 seconds, you should just get the completion percentage

hasExams Over a year ago

no i just mean to simulate the continuous streams of output .. but it seems that php does not do it, is it possible with python or java?

Sourav Over a year ago

i dont know python, and hav no idea on it ! But i don't think it is possible with Java

Markus Hedlund · Accepted Answer · 2011-04-22 07:55:15Z

3

I think Gmail shows progress when it loads all resources, like JS files. There are different ways to do this: you could dynamically include all resources with JS, or you could make all included JS files report that they've been loaded.

To make PHP output partial output, use this:

ob.php

<?php

ob_start();

for ($i = 0; $i < 100; $i++) {
    echo "{$i}<br />";

    ob_flush();
    flush();

    usleep(100000);
}

.htaccess

php_value output_buffering "0"

answered Apr 22, 2011 at 7:55

Markus Hedlund

24.4k22 gold badges82 silver badges113 bronze badges

1 Comment

Marcel Korpel Over a year ago

AFAIK, this is indeed what happens, the progress bar has nothing to do with upload bars, like more or less described in other answers.

Asain Kujovic · Accepted Answer · 2013-08-31 21:30:05Z

2

this thread and this link helped me to find out solution for the same problem, so i am providing it for the record:

test.php:

<?php 
  for($i=0; $i<100; $i++)
  {   usleep(100000); //100ms
      echo 'A'; ob_flush(); flush();
  }
?>

test.html:

<body>
   <button onclick='call()'>call</button>
   <div id='progress'>...</div>
   <script>
      function fprogress(e) 
      { document.getElementById('progress').innerHTML ='progress: '+e.loaded +'%'; }
      function call()
      {  var req = new XMLHttpRequest();  
         req.addEventListener("progress", fprogress, false);
         req.open('GET', 'test.php', true);  req.send(null);
      }
   </script>
</body>

... so test.php can be any JOB which doing some stuff... and while doing it ECHOes 100 characters (bytes) with flashing buffer.

edited Aug 31, 2013 at 21:30

answered Nov 13, 2011 at 7:35

Asain Kujovic

2,3181 gold badge20 silver badges24 bronze badges

2 Comments

mplungjan Over a year ago

The PHP on its own runs for a while and then shows a lot of As

Asain Kujovic Over a year ago

@mplungjan On my own apache/php servers, this 2 files always work as they are... on some webhosting servers, there are problems that need playing with flush, ob_flush, ob_start and ini_set(output_buffering) ...

Sanjay Mohnani · Accepted Answer · 2011-04-22 07:31:40Z

1

As per my opinion, you can divide your login process in several parts and checks.

Every part check completed send response to your progress bar and progress bar width will increase such patterns. After that progress bar will send next request to your login process for step untill you will not get upto 100% login and redirect.

answered Apr 22, 2011 at 7:31

Sanjay Mohnani

1,0109 silver badges18 bronze badges

4 Comments

hasExams Over a year ago

my question is how to get the continuous progress ??

Sanjay Mohnani Over a year ago

It's bit tricky. Divide your login in parts, 1) 1st step 2) 2nd step 3) 3rs step Send first request to system on success it will send 20 to Ajax bar and ajax bar will increase that way. Then Ajax system will send second request in reply system will send 40. So total would be 60. In third step ajax will call for final which you can maintain with sleep way or same as previous steps.

hasExams Over a year ago

well, i am looking for the trick :) ... even if you know with python or java

hasExams Over a year ago

well, thats same as my second example. thanks for your interest!!

Collectives™ on Stack Overflow

is progress bar possible with php and javascript using ajax

5 Answers 5

1 Comment

4 Comments

1 Comment

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

1 Comment

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related