How to fix: jQuery UI progress bar not animating when indeterminate value

By -
Once again I find myself in this situation:
- I run into a small problem
- I google it: can't find a solution
- Try to fix it myself: success
I am hoping that by posting this article I will help out a person or two.

UPDATE: a day later, the problem is back, this post is thereby useless. If you know a proper solution I'm all ears! ;-(

What's the problem?

The jQuery UI progress bar widget is useful in a lot of situations and it's easy to use. When you set its value to "false" (indeterminate/unset), the progress bar animates nicely. The end user feels like something is actually happening. 

The problem I've been having is that the progress bar RANDOMLY doesn't animate in my project. I'm sure I must have done something wrong at some point, but the project is so huge that it would take too long to root out the issue on my end. As a result, my users are under the impression that my application has crashed and they reload the page (while they should just be waiting for the operation to complete).

This is a simple fix. When animated, the progress bar uses the CSS class "ui-progressbar-overlay". This class gets its background from an inline GIF (base 64 encoded within the CSS file).

How to fix it?

Open your jQuery UI CSS file, look for the "ui-progressbar-overlay" class, and replace the inline GIF by an external image (the original image can be found here). 
Example:
.ui-progressbar-overlay{background:url("images/overlay.gif")

That's it! Save your files, refresh your cache and voila.

NOTE: this article has been updated. This did not actually solve the problem. I thought it did because it worked for a while, but now it has stopped working again.

Comments

Post a Comment

Popular posts from this blog

Nginx error 413: Request entity too large Quick Fix

By -
A quick article today about a common error people encounter with Nginx: the infamous 413 Request Entity Too Large HTTP error. I had the problem myself just yesterday on one of my newly configured servers, so I thought I'd make a blog post about it to make sure I don't forget this next time. Error 413: what does it mean? This error shows up when a visitor sends too much data in the HTTP request. This is normally caused by: • an overy large file being uploaded by the visitor • more generally too much POST data being sent by the client The fix is as simple as setting a directive in your Nginx configuration, read on below. How to fix it? client_max_body_size To fix this, you need to increase the value of the client_max_body_size directive. This directive defines the maximum amount of data Nginx will accept in an HTTP request. By default this value is set to 1 megabyte, meaning if you attempt to upload a file larger than 1 megabyte you'll be getting an  Error ...
Read more

Dealing with Nginx 400 Bad Request HTTP errors

By -
Today I'll write about something I experienced personally, on my websites. Some visitors reported that they were getting a "400 Bad Request" Nginx error randomly when visiting pages. And when they start getting that error, they can't access the site anymore: it'll output the same error no matter the page, until you "clear your cache and cookies". The error is easily understandable and is likely to be caused by... too much cookie data. Every time a visitor loads *any* page/content/file of your website, it sends the cookie data to the server. Cookie data is sent under the form of 1 header line starting with "Cookie: ". Basically, Nginx by default is configured to accept header lines of a maximum size of 4 kilobytes. When a line in the headers exceeds 4 kilobytes, Nginx returns the '400 Bad Request' error. Cookie data sometimes gets big, so it causes the error. It particularly happens on forums like vBulletin, Invision and others...
Read more

Affiliate module for Interspire Shopping Cart

By -
Image
Hello, I have already implemented this module on two shops rather successfully. The concept is quite simple: websites that want to get rewarded through affiliation must link to your website using an identifier in the URL. If your website is http://website.com/, then your links must be of the form http://website.com/?ref=123 where 123 is the affiliate ID. when a visitor clicks the link, the affiliate ID will be placed in a cookie that will expire after 15 days (this can be configured) when the visitor purchases an item: if the affiliate ID cookie is still enabled, the affiliate will be credited of a certain amount, it can be a share of the sale or a fixed amount. affiliate accounts are simple customer accounts, there is no modification to make regarding accounts. When a sale is made, they receive store credit. They can either spend the store credit to purchase items on the store, or they can manually request for a withdrawal (managing withdrawals is up to you). I will detail the i...
Read more