AJAX progress bar of load script

Question

I have a big problem to make a progress bar in AJAX. The whole page is in AJAX, inside one of the webpage is AJAX which loads a function to get some big rows from the database.

I tried to make progress bar in this script in a foreach loop a flush() method and by writing/reading to $_SESSION, but still nothing. I really tried everything I don`t know how to do this. Need only this to complete my project. Could someone help me with this?

It is anyway which script I want to load, how is the template for this progress bar to use it in GET or POST ajax, for any AJAX.

<script>
    jQuery(document).ready(function($) {
            
            $(document).on('click','#save',function () {
                setTimeout(getProgress,1000);
              $(this).text('Pobieram analizę...');
              $.urlParam = function(name){
             var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return decodeURI(results[1]) || 0;
    }
            }
        var id = $.urlParam('id');
        var idt = $.urlParam('idt');
                  $.ajax({
                                 url: "views/getresults.php?id="+id+"&idt="+idt,
                    success: function(data) {
                        $("#loadresults").append(data);
                    }
                });
                setTimeout(getProgress,3000);
            return false;
            });
            function getProgress(){
                
                $.ajax({
                    url: 'views/listen.php',
                    success: function(data) {
                        if(data<=100 && data>=0){
                            console.log(data);
                            $('#loadresults').html('<div id="progress"><div class="progress-bar" role="progressbar" style="width:'+ (data / 100)*100 +'%">'+ data + '/' +100+'</div></div>');
                            setTimeout(getProgress,1000);
                            console.log('Repeat');
                        } else {
                            $('#loadresults').text('Pobieram dane');
                            console.log('End');
                        }
                    }
                });
            }
        });
        </script>

and here is a getresults.php

    foreach($result as $resul) {
    $count++;
    session_start();
    $_SESSION['progress'] = $count;
    $_SESSION['total'] = 100;
    session_write_close();
    sleep(1);
}
unset($_SESSION['progress']);

and a get progress function listen.php

<?php
session_start();
echo (!empty($_SESSION['progress']) ? $_SESSION['progress'] : '');

if (!empty($_SESSION['progress']) && $_SESSION['progress'] >= $_SESSION['total']) {
    unset($_SESSION['progress']);
}

?>

mostly this session method, any flush and with somthing with spinner in html5 — CommanderSpock
– CommanderSpock, Commented Aug 12, 2017 at 6:05
I am new in ajax, i made a lot work, but this progress bar is... — CommanderSpock
– CommanderSpock, Commented Aug 12, 2017 at 6:06
and another thing is that i know exacly a number of all count results of foreach loop — CommanderSpock
– CommanderSpock, Commented Aug 12, 2017 at 6:08

Marco Mannes · Accepted Answer · 2017-08-12 06:25:53Z

1

Writing and reading session doesn't work because the standard behavior of PHP is to lock the session file while your main code is being executed.

Try to create a file and update the its content with the percentage done during the execution of your function. Something like:

<?php
function slowFunction() {
    $file = uniqid();
    file_put_contents($file, 0);
    // Long while that makes your stuff
    // you have to know how many loops you will make to calculate the progress
    $total = 100;
    $done = 0;
    while($done < $total) {
        $done++;
        // You may want not to write to the file every time to minimize changes of being writing the file 
        // at the same time your ajax page is fetching it, i'll let it to you...
        $progress = $done / $total;
        file_put_contents($file, $progress);
    }
    unlink($file); // Remove your progress file
}

?>

answered Aug 12, 2017 at 6:25

Marco Mannes

1969 bronze badges

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

5 Comments

CommanderSpock Over a year ago

so its same thing as session but using file yes ?

CommanderSpock Over a year ago

could you implement this code to my code to better understand ?

Marco Mannes Over a year ago

Sorry, when I saw your question there were no code. Yes, it is same thing as session but using files. Your function "getProgress" have to listen to that file, so, you have to pass the its name instead of "listen.php".

CommanderSpock Over a year ago

how to get this in my ajax start function ? ok in foreach loop i got this add number in file and how to get the same as listen ?

CommanderSpock Over a year ago

implement this function inside foreach loop ?

Rinsheed · Accepted Answer · 2017-08-12 06:09:07Z

0

You can't get the progress of the data download from ajax. Once you request you to the server, the next response will be only after fetching the data or when the error occurs.

The solution to you is, get the data as fractions. Such as first download the 1/10th of the data, and in the success callback, recursively call the ajax again requesting the 2/10th data. On each success callback, you could change the progress bar.

answered Aug 12, 2017 at 6:09

Rinsheed

318 bronze badges

Comments

Mortz · Accepted Answer · 2017-08-12 06:16:28Z

0

Take a look at Server Side Events or Long polling as options

answered Aug 12, 2017 at 6:16

Mortz

4,9591 gold badge23 silver badges39 bronze badges

Collectives™ on Stack Overflow

AJAX progress bar of load script

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related