PHP + Mysql insert into + jQuery progress bar

Question

I have problem with showing current inserted rows into mysql with query. Now I have this code in index.php:

  $('#nacitatATC').click(function() {
    $.ajax({
            xhr: function() {

                    var xhr = new window.XMLHttpRequest();
                    xhr.addEventListener("progress", function(e){
                        var p = (e.loaded / e.total)*100;
                        var prave = $("#progress").html();
                              $("#progress").html(prave+"<br>"+p);
                    });
                return xhr;

            }
            , type: 'post'
            , cache: false
            , url: "/sql.php"});

      });
  });

and in sql.php I have the php code with inserting data into mysql with for(). $i is the current inserting line and $pocet is total lines.

The problem is with show current inserting line with ajax. The code above shows in div #progress "100" when ajax finish loading.

I need show 1% 2% 3% 4%... 99% 100% Completed. Thanks for help!

score 1 · Answer 1 · edited May 23 '17 at 11:52

1

I think php -> flush() is what you are looking for.

This Example works perfect on my php-apache on debian

see ajax-request-progress-percentage-log

PHP side:

header( 'Content-type: text/html; charset=utf-8' );
echo 'Begin ...<br />';
for( $i = 0 ; $i < 10 ; $i++ )
{
    echo $i . '<br />';
    flush();
    ob_flush();
    sleep(1);
}
echo 'End ...<br />';

site:& javascript:

<!doctype html>
<html>
<head>
    <title>Test Flush</title>
    <meta charset="utf-8">
    <script src="./js/jquery-2.0.3.min.js" type="text/javascript"></script>
<body>
<h1>Hello</h1>
<div id="progress">0%</div>

<p>
</p>
<script type="text/javascript">
    $('h1').click(function() {
    $.ajax({
            xhr: function() {

                    var xhr = new window.XMLHttpRequest();
                    xhr.addEventListener("progress", function(e){
                        console.log(e.currentTarget.response);
                        $("#progress").html(e.currentTarget.response);
                    });
                return xhr;

            }
            , type: 'post'
            , cache: false
            , url: "testFlush.php"
        });

    });

</script>
</body>

Also have a look at Rogers Answer in how-to-flush-output-after-each-echo-call He found issues in the apache setup

edited May 23 '17 at 11:52

Community

1
1

answered Dec 14 '13 at 12:15

Erik255

1,463
1
11
13

Please, see the online demo: http://codebook.cz/ ..the `progress bar` is div with id `#progress` ..dont show anything – David Lences Dec 14 '13 at 12:47
just tried ! works but sows cryptic text with 1 second steped changes:
Begin ...
0
2„P˙˙2‚P˙˙2†P˙˙2P˙˙2…P˙˙2P˙˙2‡P˙˙˛€P˙˙˛„P˙˙rÍKA ˙˙UˇAVb
– Erik255 Dec 14 '13 at 12:57
I need to show it in the progress div.. And this code show all lines in one moment when ajax finish loading. – David Lences Dec 14 '13 at 12:57
What Browser do you use? – Erik255 Dec 14 '13 at 13:00
For me that line shows in one moment after ajax loading. Look this my gif what I see: http://gyazo.com/beaabbf2ac5991877ee0942fd22bb92e – David Lences Dec 14 '13 at 13:41

PHP + Mysql insert into + jQuery progress bar

1 Answers1