Temp Tutorial

Jquery:: Ajax powered progress bar?
4 down vote favorite

I have a page which uses jquery’s ajax functions to send some messages.

There could be upwards of 50k messages to send.

This can take some time obviously.

What I am looking to do is show a progress bar with the messages being sent.

The backend is PHP.

How can I do this?

My solution: Send through a unique identifier in the original ajax call.
This identifier is stored in a database(or a file named with the identifier etc), along with the completion percentage.

This is updated as the original script proceeds.

a function is setup called progress(ident)

The function makes an ajax call to a script that reads the percentage.
the progressbar is updated If the returned percentage is not 100,
the function sets a timeout that calls itself after 1 second.
php javascript jquery ajax progress-bar
share|improve this question

edited Dec 21 ’10 at 23:23

asked Dec 21 ’10 at 20:36
Hailwood
4,54333692

99% accept rate

Nice, great idea. I’m glad you got it to work! – 65Fbef05 Dec 22 ’10 at 13:19
feedback
3 Answers
active oldest votes
up vote 2 down vote accepted

You could have an animated gif load via .html() into the results area until your ajax function returns back the results. Just an idea.

Regarding the jquery ui progress bar, intermittently through your script you’ll want to echo a numeric value representing the percent complete as an assigned javascript variable. For example…

// text example php script
if (isset($_GET[‘twentyfive-percent’])) {
sleep(2); // I used sleep() to simulate processing
echo ‘$(“#progressbar”).progressbar({ value: 25 });’;
}
if (isset($_GET[‘fifty-percent’])) {
sleep(2);
echo ‘$(“#progressbar”).progressbar({ value: 50 });’;
}
if (isset($_GET[‘seventyfive-percent’])) {
sleep(2);
echo ‘$(“#progressbar”).progressbar({ value: 75 });’;
}
if (isset($_GET[‘onehundred-percent’])) {
sleep(2);
echo ‘$(“#progressbar”).progressbar({ value: 100 });’;
}

And below is the function I used to get the progress bar to update its position. A little nuts, I know.

avail_elem = 0;
function progress_bar() {
progress_status = $(‘#progressbar’).progressbar(‘value’);
progress_status_avail = [‘twentyfive-percent’, ‘fifty-percent’, ‘seventyfive-percent’, ‘onehundred-percent’];
if (progress_status != ‘100’) {
$.ajax({
url: ‘test.php?’ + progress_status_avail[avail_elem],
success: function(msg) {
eval(msg);
avail_elem++;
progress_bar();
}
});
}
}

If I had to guess, I bet there is a better way… But this is the way it worked for me when I tested it.
share|improve this answer

edited Dec 21 ’10 at 22:30

answered Dec 21 ’10 at 20:45
65Fbef05
2,568613

+1, code could be refactored, but I like the idea! – Box9 Dec 21 ’10 at 21:49

I may be going crazy, but is success not called only when the entire response is received? – Hailwood Dec 21 ’10 at 21:53

Exactly, which is why I had to break up the php script into 4 different functions and make 4 ajax calls. – 65Fbef05 Dec 21 ’10 at 22:04
feedback
up vote 3 down vote

Check this if you use jQuery: http://docs.jquery.com/UI/Progressbar

You can just supply the value of the bar on every AJAX success.

Otherwise, if you don’t use JS Framework see this: http://www.redips.net/javascript/ajax-progress-bar/

I don’t have a way to test it, but it should go like this:

var current = 0;
var total = 0;
var total_emails = ;

$.ajax({

…
success: function(data) {
current++; // Add one to the current number of processed emails
total = (current/total_emails)*100; // Get the percent of the processed emails
$(“#progressbar”).progressbar(“value”, total); // Add the new value to the progress bar
}
});

And make sure that you’ll include jQuery along with jQueryUI, and then to add the #progressbar container somewhere on the page.

I may have some errors though … You will probably have to round the total, especially if you have a lot of emails.
share|improve this answer

edited Dec 21 ’10 at 21:32

answered Dec 21 ’10 at 20:44
Andrey Voev
1207

Yeah I will be using progress bar, The main part of my question is, How do I get the progress? – Hailwood Dec 21 ’10 at 20:53
feedback
up vote 0 down vote

Use this answered question

this is how i implemented it:

var progressTrigger;
var progressElem = $(‘span#progressCounter’);
var resultsElem = $(‘span#results’);
var recordCount = 0;

$.ajax({
type: “POST”,
url: “Granules.asmx/Search”,
data: “{wtk: ‘” + wkt + “‘, insideOnly: ‘” + properties.insideOnly + “‘, satellites: ‘” + satIds + “‘, startDate: ‘” + strDateFrom + “‘, endDate: ‘” + strDateTo + “‘}”,
contentType: “application/json; charset=utf-8”,
dataType: “xml”,
success: function (xml) {
Map.LoadKML(xml);
},
beforeSend: function (thisXHR) {
progressElem.html(” Waiting for response from server …”);
ResultsWindow.LoadingStart();

progressTrigger = setInterval(function () {
if (thisXHR.readyState > 2) {
var totalBytes = thisXHR.getResponseHeader(‘Content-length’);
var dlBytes = thisXHR.responseText.length;
(totalBytes > 0) ? progressElem.html(“Downloading: ” + Math.round((dlBytes / totalBytes) * 100) + “%”) : “Downloading: ” + progressElem.html(Math.round(dlBytes / 1024) + “K”);
}
}, 200);

},
complete: function () {
clearInterval(progressTrigger);
progressElem.html(“”);
resultsElem.html(recordCount);
ResultsWindow.LoadingEnd();
},
failure: function (msg) {
var message = new ControlPanel.Message(”

There was an error on search.

” + msg + ”

“, ControlPanel.Message.Type.ERROR);
}
});

share|improve this answer

---

How to show progress of jquery load
0 down vote favorite

I need something similar to this ->

How to show loading spinner in jQuery? since I also call the div content with jQuery .load() function.

But instead of showing picture, I would like to show progress bar. So I need to watch progress of that request.

Is it possible? How can I do that?
jquery ajax load progress-bar
share|improve this question

asked May 7 at 11:11
Oriesok Vlassky
18017

100% accept rate

feedback
2 Answers
active oldest votes
up vote 1 down vote accepted

The example you gave uses only ajaxStart and ajaxReady, not any progress. As far as I know there is no way to determe the progress of the call via jQuery.
share|improve this answer

answered May 7 at 11:14
George Boot
1326

Yes I know there is no progress, that’s why I asked if it is possible. Well than the picture has to be enough. – Oriesok Vlassky May 7 at 11:17
feedback
up vote 0 down vote

Hiya DEMO http://jsfiddle.net/5ZRfY/

something like this perhaps. and please see here: http://api.jquery.com/ajaxComplete/ or http://api.jquery.com/ajaxSuccess/ and http://api.jquery.com/jQuery.ajax/ (have some good reads)

You can always put the call on start and stop when ajax finished successfully!

hope this helps, have a good one, cheerios!

Jquery code

$(document).ready(function() {

$(‘#progressBar’).append(‘

‘);

// percentage of completion
var progress = ‘100%’;

// Animate the #bar div
$(‘#bar’).animate({
width: progress
}, 400);

});​

HTML

​

css

body{
background:#f6f6f6;
}

/*Styling of progress bar container*/
#progressBar{
width:300px;/*It is important to define the width of the progress bar*/
height:40px;
padding:0px;
background:#ccc;
border:1px solid #aaa;
-moz-box-shadow: inset 0 0 3px #888;
-webkit-box-shadow: inset 0 0 3px #888;
box-shadow: inset 0 0 3px #888;
}
/*styling the progress bar*/

#bar{
background:#499aed;
height:100%;
width:0; /*sets the bar to 0*/
}​

share|improve this answer

---

djdkl