How to Integrate Progress Bar in Ajax XHR Listner

by Owais Mushtaq

Recently, I had a requirement where I had to show progress bar while I sent multiple files.  I faced a problem since I had two forms, one contained files and the other had some input fields. Both forms were in modals and so it was not possible to submit them without ajax. One of the forms was in base outside body tag (this is required to blur the entire background as the form was in modal) and other form, in modal, without any associated file.

Please find solution to the above problem as below,

$.ajax({

 type:POST,

 url : "your url",

 data : {dictionary},

 enctype: 'multipart/form-data',

 cache: false,

 contentType: false,

 processData: false,

 xhr: function() { # xhr listener object

 $(".progress").show(); //here we show the progressbar

 myXhr = $.ajaxSettings.xhr(); #intialize xhr listner

 if(myXhr.upload){ # looks for upload data

 myXhr.upload.onprogress = function (e) {# calculate the data uploaded

 var completed = 0;

 if (e.lengthComputable) {

 var done = e.loaded,# gives estimate of how much data is uploaded

 total = e.total; # total size of data to be uploaded

 completed = Math.round((done / total * 1000) / 10); # this is where actual calculation takes place to show with of progressbar


 }

 var prog= Math.round(completed)+'%' # you can skip the round

 $(".progress-bar").width(prog); # value is set to progressbar

 }

 }

 return myXhr;


 },

 success : function(response) {

 $(".progress-bar").width(0);

 $(".progress").hide();

 },

 error: function() {

 console.log('Error occured');

 }

 });

 

Here, as you must have observed, I have used XHR object; this is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. This is the reason why it’s possible to use ajax. For more info regarding XHR please visit, http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp.

To learn more about

Contact Us

Leave a Reply

Your email address will not be published. Required fields are marked *

Tools & Practices

Tools and Technologies we use at Applied

Contact us now

Popular Posts