CODEWITHSUNDEEP
phpjavascriptajaxprogress-bar
hasExams
hasExams

Reputation: 205

is progress bar possible with php and javascript using ajax

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,

  1. 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 ?

  2. 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?

Upvotes: 8

Views: 6172

Answers (5)

Asain Kujovic
Asain Kujovic

Reputation: 1829

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.

Upvotes: 2

Markus Hedlund
Markus Hedlund

Reputation: 24244

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"

Upvotes: 3

Sourav
Sourav

Reputation: 17530

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 !  */
?>

Upvotes: 3

Sanjay Mohnani
Sanjay Mohnani

Reputation: 990

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.

Upvotes: 1

Jani Hartikainen
Jani Hartikainen

Reputation: 43243

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)

Upvotes: 9

Related Questions