How would you create a progress bar with AJAX/jQuery for downloading XML content?

Question

I apologize if this is a rather simple answer, but I've been stuck on it for a while. Currently I have an XML file where users can add images, audio files, and text in a multitude of ways. In case the file becomes large, I'd like for the page to require a progress bar.

I have found numerous tutorials on creating progress bars for uploads, for PHP files, and styling them, but I haven't found anything for monitoring the percentage of an XML file that has been read and processed. I've been trying to make my code work in conjunction with this tutorial, but to no luck.

My simple AJAX call:

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: xmlTitle,
        dataType: "xml",
        success: parseXML
    });
});

parseXML is my function to read the XML file, and then properly display it on the HTML.

Essentially I'd like to have the code automatically show the progress bar, and on success make the progress bar disappear and show the content.

If I'm approaching this the wrong way, I'm also open for any other suggestions. Sorry again if this is a simple question, but thanks for any responses.

score 2 · Accepted Answer · answered Apr 15 '13 at 19:13

2

This should be enough to do it:

$(document).ready(function() {
    showProgressBar();
    $.ajax({
        type: "GET",
        url: xmlTitle,
        dataType: "xml",
        success: parseXML
    });
    function parseXML(xml){
        hideProgressBar();
        ...
    }
});

If you wanted to actually update the progressbar with the real progress of the upload, you'll have to use the xhr.upload.progress event and the xhr.progress event, neither of which are implemented in jQuery because there is no workaround to make them work in IE<10.

answered Apr 15 '13 at 19:13

Kevin B

94,570
16
163
180

This was actually one of the possibilities I stumbled across. I was hoping to find a way to actually update the progress bar, but this is a much simpler work around. I suppose I could always use a loading gif instead. Thank you! EDIT: I forgot to ask about the AJAX success statement. Is the success statement just saying that the request was a success, or that everything (e.g. the images and audio) is being displayed properly? – user2059503 Apr 15 '13 at 19:26
@user2059503 It just says that the request was successful and that the data it returned is accessible. – Kevin B Apr 15 '13 at 19:32

score 1 · Answer 2 · answered Apr 15 '13 at 19:14

1

If you could move to websockets, I think you'd get more ability to manage the data transfer in a single thread.

If you want traditional ajax, I think you need an approach similar to the one typically used for upload progress:

http://phpmaster.com/tracking-upload-progress-with-php-and-javascript/

Basically, poll the server and ask it how far along it is in the transfer, then report that to the user. So you'd have your large ajax request while simultaneously polling a different small endpoint. Your server keeps the upload progress as part of the user session.

answered Apr 15 '13 at 19:14

Julian

2,814
21
31

Thanks for the response! From the research I've done, it seems that XMLHttpRequest is the proper way to show a progress bar, and I assumed it would take some PHP code. I'll most likely stick with just showing and hiding a div for simplicity stake, but thank you for the response, this looks to be the correct way to go about it. I would just need to find a way to adapt it to downloading rather than uploading. – user2059503 Apr 15 '13 at 19:42

How would you create a progress bar with AJAX/jQuery for downloading XML content?

2 Answers2

Linked