CODEWITHSUNDEEP
javascriptjqueryajaxhtml
user2059503
user2059503

Reputation: 67

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

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.

Upvotes: 1

Views: 5513

Answers (2)

Julian
Julian

Reputation: 2845

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.

Upvotes: 1

Kevin B
Kevin B

Reputation: 95057

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.

Upvotes: 2

Related Questions