how to implement progress bar based on ajax response

Question

I have try to implement progress bar based on ajax response from server side (PHP).but i can't identify the progress bar calculation like how to calculate the progress bar timing between request and response of submit form through ajax.

<script>
$('.uploadProject').on('submit',function(e){
      e.preventDefault();
    //ray.ajax();
    var formData = new FormData($(this)[0]);
    progress(80, $('#progressBar'));
    $.ajax({
        url: "ajax/submitted_project_action.php",
        type: "POST",
        data: formData,
        async: false,
        success: function (data) {
            if(data==1){
                window.location.href="submitted_project.php?success";
            }else{
                window.location.href="submitted_project.php?error";
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });


})

 <script>
 function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').animate({ width: progressBarWidth },500).html(percent + "%&nbsp;");
}
</script>

My HTML COde

   <style>
        #progressBar {
width: 400px;
height: 22px;
border: 1px solid #111;
background-color: #292929;
}
#progressBar div {
height: 100%;
color: #fff;
text-align: right;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #0099ff;
}
        </style>

         <div id="progressBar"><div></div></div>

http://stackoverflow.com/questions/19126994/what-is-the-cleanest-way-to-get-the-progress-of-jquery-ajax-request — adeneo, May 02 '15 at 14:07
Correct solution can be found here: http://stackoverflow.com/a/19127053/2963579 — Sanyam Jain, Sep 12 '16 at 07:21

score -1 · Answer 1 · answered May 02 '15 at 19:46

The good way would be to listen to the "progress" event listener.

Example:

$.ajax({
  type: 'POST', // GET/POST
  url: "/", // Some URL
  data: {}, // Misc data
  beforeSend: function(XMLHttpRequest) // Do the following before sending the request
  {
    //Upload progress
    XMLHttpRequest.upload.addEventListener("progress", function(event) // Add a "progress" listener.
    {
      if (evt.lengthComputable) 
      {  
        var percentComplete = (event.loaded / event.total) * 100;
        // You can use this data for your progress bar.
      }
    }, false); 
  },
  success: function(data)
  {
  // Here, you can make your progress bar green or something.
  }
});

i got error while run this above code. TypeError: XMLHttpRequest.upload is undefined — Intrepid Uliyar, May 04 '15 at 05:05

how to implement progress bar based on ajax response

1 Answers1