jQuery UI Indeterminate ProgressBar Not Animating under Ruby on Rails

Question

I'm having trouble making a jQuery UI indeterminate progressbar work properly in a Rails application. I'm basing my work off the jQuery-UI API demos at http://jqueryui.com/progressbar/#indeterminate and am trying to adapt this for my application.

The key parts of the jQuery example code that I'm trying to emulate are:

$(function() { $( "#progressbar" ).progressbar({value: false});
<style> #progressbar .ui-progressbar-value {background-color: #ccc;}</style>
<div id="progressbar"></div>

The key pieces of code in my Rails app are as follows:

application.js:

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree ./sitewide

page-specific JS (event.js) - included in views/events/new.html.erb:

$(document).ready(function() { $( '#progressbar' ).progressbar();
                               //$( '#progressbar' ).css({background: '#aa0000'});
                               $( '#progressbar' ).progressbar( { value: false } );
                             });

application.css:

@import url(http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css);

events.css.scss:

#progressbar .ui-progressbar-value { background-color: #ccc; }

views/events/new.html.erb:

<div id="progressbar"></div>
<%= javascript_include_tag "events" %>

Resulting HTML in served page:

<div id="progressbar"></div>
<script src="/assets/events.js?body=1" type="text/javascript"></script>

This code produces a blank white bar in the progressbar div, rather than the grey animated bar from the jQuery demo. If I remove the comments in the document.ready function, the bar changes to red (#aa0000), but it's still not animated, just static. I would greatly appreciate any insight anyone has into this behaviour.

Update: I found the following thread - https://forum.jquery.com/topic/progressbar-api-redesign#14737000003912014 - which suggests that the animated overlay GIF file has not been included in the theme packages yet, so I downloaded it and installed it in assets/images/animated-overlay.gif, but it still doesn't work. I found the following lines in the Smoothness theme CSS file:

.ui-progressbar .ui-progressbar-overlay {
    background: url("images/animated-overlay.gif");
    height: 100%;
    filter: alpha(opacity=25);
    opacity: 0.25;
}

so I think I'm putting the image in the right place. Any suggestions?

score 2 · Answer 1 · answered May 04 '13 at 07:48

I was having the same issue with the indeterminate progressbar. I'd suggest you download the themes package directly from the ThemeRoller page (there's a link at the bottom of the page called Themes):

http://jqueryui.com/resources/download/jquery-ui-themes-1.10.3.zip

Extract the specific theme folder you want to use - in your case smoothness. The animated-overlay.gif should be included in the theme's images folder.

In my case I didn't have this .gif and so there was no animation. Once I added the .gif in the theme's images folder it just worked. :)

nolsen311 · Answer 2 · 2013-09-06T17:36:33.797

I just had a similar problem with an MVC4 app in ASP.NET.

My issue was that the form post cancelled the GET of the animated GIF. i.e., it was located where it was supposed to be, but wasn't getting loaded because navigation redirected it elsewhere beforehand.

I discovered this when I accidentally broke the http POST.

I'm still trying to figure out how to get the animation working, but submit the form also.

UPDATE: My (ugh) hacky workaround at this point is to make the form into an Ajax Form using Microsoft.jQuery.Unobtrusive.Ajax (@Html.BeginForm -> @Ajax.BeginForm) and then put a tiny delay in submitting the form via jQuery. It's kinda ugly, but it's working so far

score 0 · Answer 3 · edited May 23 '17 at 10:27

I would like to reply to this, even though the app I am using is a plain-Jane ASP.NET web site and the server-side language is C#.

I noticed that on IE 11, the background GIF for the JqueryUI progressbar was not working when I tested my web pages. My main testing page shows the indeterminate progressbar when I click on a Search button and there is a POST back to the server to kick off a server-side method. In this page, I was easily able to set parameters in such a way that the search would take approximately 30 seconds.

Using the same code in either Firefox or Chrome, the progressbar background GIF animates just fine when I POST back. In IE, it does not.

With the DOM Explorer window open in IE, during the wait, I was able to select the progressbar div in the Styles window, look at the CSS attributes, and verify that it had identified and kept enabled the GIF file for the background. This meant the progress bar really did have an animated GIF on display.

When I un-checked the background box in the Styles window, the GIF went away as expected. When I re-checked it, the GIF came back but it was animated!

As a final test, I kept the progress bar visible always and ran the app. I noticed that the GIF would appear animated initially. However, when the page posted back to the site and waited for a response, the GIF would stop animating.

All of this, of course, was discussed and vilified in another StackOverflow post.

jQuery UI Indeterminate ProgressBar Not Animating under Ruby on Rails

3 Answers3