JQuery UI Button Icons not displaying

Question

I'm trying to apply an icon to a jquery UI styled button in my Rails app. The button is styled correctly but I just can't get the icons to show up! Could anyone give me any suggestions - I'm pulling my hair out!

I've done the following:
1) Copied the javascript files (jquery-1.4.2.min.js and jquery-ui-1.8.2.custom.min.js) to public/javascripts
2) Copied the entire smoothness theme directory to under public/css
3) Added the following code to my layout file to include the relevant files:

<%=stylesheet_link_tag 'smoothness/jquery-ui-1.8.2.custom', :media => 'screen, projection'%>
<%=javascript_include_tag 'jquery-1.4.2.min', 'jquery-ui-1.8.2.custom.min', 'application'%>

4) Added a 'save' class to the button I want styling:

<%= submit_tag 'Save Changes', :class => 'save' %>

5) Added the following to the application.js file:

$(document).ready(function() {
    $(".save").button( { icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} } );
});

(Until I get it working, the code in step 5 is copied and pasted from the docs - I've just changed the selector)

The button picks up the theme's style - but I'm having no luck getting the icons to show up - have I missed a step?

Many Thanks,
Ash

Answer 1

I don't know if there's a bug in jQuery UI for converting input type="submit" elements to jQuery UI buttons, but when I changed the mark-up to render a <button> element instead of an <input type="submit" .../>, it worked:

<button type="submit" class="save">Save Changes</button>

Granted, I just did this with static HTML, not Ruby on Rails. Honestly, I'm a C# / ASP.NET MVC developer, so I'm not sure if you can render a button element using RoR. If you can, maybe that's the direction to take for now in case it's a jQuery UI bug.

I was able to recreate the problem with static HTML with using an input submit element. It worked once I switched to an HTML <button> control.

Hope this helps!

Answer 2

I had a similar issue on a JSF/Facelets project using JQuery UI. It turns out that I needed to copy all of the image files referenced by the JQuery UI CSS into a directory named "images" as a subdirectory of the directory where I put the JQuery UI CSS file.

Image files: http://code.google.com/p/jquery-ui/source/browse/branches/labs/assets/theme/images