1

I have a form in my index.html that calls a jQuery function on submitting. This jQuery function does an AJAX request to run a PHP script.

I want the PHP script to interact with the HTML (the goal is to refresh a progress bar).

My problem is that in running the PHP script with AJAX, it's executing in background. I don't want the page to refresh during the processing of PHP in fact.

I've made a drawing. I've made a drawing.

How can I achieve this ?

Community
  • 1
  • 1
Valentin P
  • 348
  • 2
  • 10
  • Are you uploading a file by any chance? – ka_lin May 31 '17 at 12:04
  • Give information regarding progress bar. What's the purpose of progress bar? – gvgvgvijayan May 31 '17 at 12:06
  • PHP code is executed on the server (so *before* it reaches the browser). It cannot tell your browser to do anything on-the-go because it's already generated once and that's it. You could store your progress on the server and . See this: https://stackoverflow.com/questions/15410265/file-upload-progress-bar-with-jquery – Vergil Penkov May 31 '17 at 12:06
  • @ka_lin Yes to the end of the PHP process I upload a PNG file to the user. – Valentin P May 31 '17 at 12:07
  • why not make use of the ajax callback, return the percentage that the progressbar should be at, and change the widthe of it using js\ – Jelmergu May 31 '17 at 12:08
  • 1
    You can send a `json` response from `PHP` to the success callback of `AJAX` and update the progressbar in the front end part, **not** in `PHP` like you do now . – Ionut Necula May 31 '17 at 12:09
  • Valentin check this http://php.net/manual/en/session.upload-progress.php – gvgvgvijayan May 31 '17 at 12:09
  • In case you upload files you can use https://blueimp.github.io/jQuery-File-Upload/ . – ka_lin May 31 '17 at 12:09
  • @VergilPenkov You mean that at each change of progression I need to make an AJAX query? It means that I will make several HTTP requests on the server per second, is not that a bit heavy? – Valentin P May 31 '17 at 12:11
  • Or even better, read this http://phppot.com/jquery/jquery-progress-bar-for-php-ajax-file-upload/ or this https://www.sanwebe.com/2012/05/ajax-image-upload-with-progressbar-with-jquery-and-php and there are more example on Google. You just need to do some research. – Ionut Necula May 31 '17 at 12:12
  • you can make the Ajax-call for all queries at once – Sascha May 31 '17 at 12:12
  • @Ionut But the response is called just once, that made only one refresh of my progress bar, isn't it ? – Valentin P May 31 '17 at 12:13
  • @ValentinPapin, yes it's called just once, but it takes time, so you can make use of that time. Also please see the links posted in my previous comment. I think those would help you get started. – Ionut Necula May 31 '17 at 12:15
  • Thank you all for advices, I test this and I come back to give you a feedback. – Valentin P May 31 '17 at 12:19

1 Answers1

0

I think you mean that the progress bar should get filled by an uploading process. You can do it like that

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                $('#progress').text(percentComplete + '%').css('width', percentComplete + '%');
            }
       }, false);

       // Download progress
       xhr.addEventListener("progress", function(evt){
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               $('#progress').text(percentComplete + '%').css('width', percentComplete + '%');
           }
       }, false);

       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        // Do something success-ish
    }
});
UfguFugullu
  • 2,107
  • 13
  • 18
  • And how PHP tell the pourcentage in your script ? – Valentin P May 31 '17 at 13:10
  • It will work without doing something in PHP because I think these data will be send through the request. More Informations you can get here [XMLHttpRequest](https://developer.mozilla.org/de/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) – UfguFugullu May 31 '17 at 13:27
  • Yes but in my case I don't upload a file, I pass an URL to PHP and I wait that it returns me the progress of the process. – Valentin P May 31 '17 at 13:37
  • "have a separate AJAX request repeatedly check the log file in order to pull the current status of the script" -> http://stratosprovatopoulos.com/web-development/php/ajax-progress-php-script-without-polling/ Isn't that a bit heavy ? – Valentin P May 31 '17 at 13:42
  • Sorry I've misunderstood you. So in these case you could save the percentage of the process in the session during the curl [CURLOPT_PROGRESSFUNCTION](http://php.net/manual/en/function.curl-setopt.php). Then you can use ajax to get these information out of the session. But I don't know if there is a "cleaner" solution – UfguFugullu May 31 '17 at 13:48
  • I found the solution with HTML5 server sent events ! I post it as answer tonight. – Valentin P May 31 '17 at 14:53