0

I went through many other links while searching for this question. I didn't get any particular answer.I have php script to insert more than 50,000 data into database . I called the script through ajax function.I want to track the progress of the script and show it on a progress bar . Please help me out with some code snippet . Thank you

Arun
  • 1,609
  • 1
  • 15
  • 18
  • Maybe you can try one of those? http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ https://stackoverflow.com/questions/20095002/how-to-show-progress-bar-while-loading-using-ajax https://stackoverflow.com/questions/19139613/update-progress-bar-using-ajax-request-seconds https://www.sitepoint.com/community/t/progress-indicator-for-an-ajax-request/100083 https://zinoui.com/blog/ajax-request-progress-bar http://w3shaman.com/article/php-ajax-progress-bar - Feel free to pick one you like. – Xatenev Jun 01 '17 at 11:51
  • 3
    Possible duplicate of [progress bar with mysql query with php](https://stackoverflow.com/questions/15298071/progress-bar-with-mysql-query-with-php) – Pyromonk Jun 01 '17 at 11:51
  • I recommend you post your code here for people to know where to start to guide you. – tiomno Jun 01 '17 at 11:51

3 Answers3

1

There are two ways you could do this depending on what is in the database before the first insertion by the script started by the AJAX request. One way would be to have an extra entry in some database table, that get's the percentage complete from the PHP script every time one entry was changed.
This is the script that puts your data in the database.

$array = array(/*50,000 entries here from the ajax request*/);
$counter = 0;
foreach($array as $entry){
    // do the insertion in the database
    $percentage = $counter / count($array);
    // insert $percentage in the database in another table
}

Then you can make another AJAX request to a script that returns the value of database field that stores the calculated percentage every (tenth-)second.

If the database is empty before you make the request you have to count how many entries you will insert before you make the AJAX request and save it in a variable in the JS.
Then you can make another AJAX request every (tenth-)second and that php should just count the database entries in the table, pass it to the JS and the JS calculates the percentages.

Jonathan
  • 177
  • 1
  • 11
  • 1
    this is the correct answer solutions below don't deal with actual insertion progress, I might add that progress table should store a value that's relevant for current user and retrieved via 'Insert request ID' some random ID that's generated at the beginning of the insert. – George Dryser Jun 01 '17 at 12:46
  • What if the process is run by several users at the same time? The percentage in the database would be overwritten and showing inaccurate values, right? – tiomno Jun 05 '17 at 23:07
  • You would have to have some form of identifier like the timestamp in milliseconds or whatnot that will be included in the initial transmission. That would be just what George commented directly above you timo. – Jonathan Jun 06 '17 at 07:08
0

What I'd do not to block the UI is to keep track of the progress in the DB with a SESSION variable or writing to a log file or table in the DB. Session is better as you don't need to keep track of concurrency and race condition.

Then from the browser make an AJAX call every second or the time you decide to read the SESSION variable and update the progress bar.

When the original AJAX call that does the main process finish, you complete the progress bar and/or show a complete message to the user.

tiomno
  • 2,178
  • 26
  • 31
0

This is a sample to show progress. '#progressBar' is the id of a bootstrap progressbar

$.ajax({
            xhr:function(){
                    var xhr = new window.XMLHttpRequest();
                    xhr.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                            var percent = Math.round((e.loaded / e.total) * 100);
                            $('#progressBar').attr('aria-valuenow', percent).css('width', percent + "%").text(percent + "%");
                            if (percent == 100)
                            {
                                complete = 1;
                            }
                        }
                    });
                    return xhr;
                },
            type:'POST',
            url: '',
            success:function(response) {
            //success code....
            }
     });