I wanted to create a progress bar with the jquery modal when it's downloading. How I can do it in jquery / Ajax ?

I was trying with this http://johnculviner.com/post/2012/03/22/Ajax-like-feature-rich-file-downloads-with-jQuery-File-Download.aspx , but not working.

The code for the download link :
<a class="download" href="${cmd.fileUrl}"><span>CSV</span></a>

It's using url to download the file.

Anyone can help ?

Recommended Answers

All 8 Replies

What does it mean by "not working"? How would we know what it is supposed to be?

To be honest, I do not like the idea of using JavaScript to download files because of security issue. This is why browsers do not allow JavaScript in the first place (but Ajax breaks through). Though, there are some people who think that it is what they want and is convenient, so they suppress the security concern. Please remember, convenience is a trade off for security/privacy.


But I just want to display a popup to indicate loading / progress bar, because the files need to download is a large data.

I'm using servlet and content-type - application/octet-stream.

You have any idea ? Because once user click the download, he have to wait about 20-50 sec. It is a csv files contains million of records.

Anyone can help ?

OK, so what error did you get from it? Did it silently fail? What browser did you try it on? Do you have any plug-in for browser to detect whether an error from JavaScript occurs on the page?

The plug-in requires that the browser used in this must accept cookies. It is not common that a user would set his/her browser to not accept cookies nowadays, but that's just in case. I think in your case, it is about trouble-shooting more. The back-end does not mean anything much. The application/octet-stream can be set using MIME-type (the plug-in page explains that).

What plug in to use? I'm using google chrome to test it.

I able to download, and loading bar with popup has show up but it doesn't close it back.

Do I need any calculation on the JavaScript ? So it know when to close it back when finish downloading.

Sorry for not reply earlier. Anyway, you mean you implement it from scratch. That's great.

Anyway, you shouldn't attempt to calculate the time to close. You should, instead, have another ajax call (after the pop up) to wait for the complete send file from the server to remove the pop up. I don't know your implementation, so it would be up to you.

Now I able to download and close the pop up on firefox browser. But for IE and chrome, it just pop up and close immediately. Do you have any idea ?

I have include Set-Cookie filedownload=true. And only firefox would wait till download is finish then only remove the cookie, whereas IE and chrome remove the cookie immediately.

You could read this page and this page for more information. The cookies on IE and chrome are not persisting by default. You need to define the persistance using HTML meta tag. On Firefox, it is by default.

Do you have example to define it using HTML tag? I able to get the cookie on Chrome but it gone too fast.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.