PHP Progress Bar on web page

Question

I have this segment in my php script that shows a progress bar.

<?php
    echo '
    <div class="progress progress-xlarge progress-striped active">
        <div id="progress_bar" class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
    </div>
    ';
?>

The width: 90% determines the level of the progress bar.

I want a way to make the progress bar run from 0 to 100 without reloading the page for each iteration. My general ideas is something like.

for($i = 0; $i <= 100; $i++)
    echo '... style="width: $i"...

I know that this will echo a new progress bar for every iteration. It's just a ways to explain what i want. Hope you understand.

I've seen things concerning this like jQuery and Ajax but I can't understand them.

This is the first of this kind of programs i'm writing.

Ive succeeded to make the progress bar move with this script but it runs to fast.

    <script>
$(document).ready(function(){
    for(var i = 0; i < 100; i++)
    {
        $("#progress_bar").attr("style", "width: " + i + "%");
        //setTimeout(function() {}, 2000);   this time out does not work
        //if(i == 99) i = 0; i want the progress bar to start back when complete, 
        //instead the page gets in an infinite loop.

    }
});
</script>

Help with the new changes.

Answer 1

I'm sorry to bring this to you, but PHP can't change what's getting send to the browser. Once it's in the browser, PHP can't change it anymore. PHP does it's things on the server, before the browser receives it.

You have to use Javascript (jQuery) to change the content of your website when PHP is done sending it. There is no other way.

Also, the progress of PHP isn't logged, so the loading of a page cannot be in a progress bar, unless you want to fake it.

A simple way to fake it (using jquery):

<div class="progress progress-xlarge progress-striped active">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
<script>
    var t = setInterval(function(){
        var num = parseInt($(".progress .progress-bar").css("width"));
        if(num < 100) $(".progress .progress-bar").css("width", (num+1)+"%");
        else clearInterval(t);
    }, 250);
</script>

caution : i said simple way, not the most efficient way.

Answer 2

Just for the record: As already mentioned this can't be done in plain PHP, but your methodology would be: Render the HTML oputput, when done Instantiate a call to your backend with JavaScript (ie jQuery) once this returns Update the % width of your element with Javascript. Once you reach 100%... Problem: You would need 100 callbacks... so ... you can either fake it... or increment depending on your backend job in higher percentages that - at the end - reflect your 100%

Answer 3

尝试看一下： https : //jqueryui.com/progressbar/#label这是假加载栏，因为PHP无法发送进度状态，并且全部显示在客户端（在浏览器中）

Answer 4

This example does not use AJAX, so it is a faked progress bar, but just to demo one method by which you could include the javascript:

<?php
    $out = '
        <div class="progress progress-xlarge progress-striped active">
            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
        </div>
        <script>
            <!-- This (next) line might not be necessary if you are loading it elsewhere -->
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
            $(function(){
                for($i = 0; $i <= 100; $i++){
                    setTimeout(function(){
                        $(".progress-bar").attr("aria-valuenow",$i);
                    },300);
                    //300ms delay between increments
                }
            });
        </script>
    ';
    echo $out;
?>

For more information about AJAX, see this post:

AJAX request callback using jQuery