Question

I’m pretty new to JQuery and JQuery-UI, but I’m having fun with it so far. My Javascript skills are a bit rusty, however, so some things are giving me a bit of a headache.

I’m using Jquery UI to theme my site, and I have several buttons that I want to set up with the appropriate theme. Each button has a different icon, so I ended up with a bunch of statements that look like this:

<script type="text/javascript">
    $(function() {
        $('[id$="butFind"]').button({
            icons: {
                primary: 'ui-icon-search'
            }
        });
    });
    $(function() {
        $('[id$="butUpdate"]').button({
            icons: {
                primary: 'ui-icon-disk'
            }
        });
    });
    $(function() {
        $('[id$="butCancel"]').button({
            icons: {
                primary: 'ui-icon-cancel'
            }
        });
    });
// and so on for several more controls
</script>

I’m using the [id$=] (“ID ends with”) selector as the controls that I’m theming are ASP.NET LinkButtons on a Content Page based off of a Master Page, and they get renamed when rendered to something like “ctl00_ContentPlaceHolder1_butFindSku”. The ASP.NET markup for the buttons is pretty simple, and looks like:

<asp:LinkButton ID="butUpdate" runat="server" Text="Update" 
   CommandName="Update"  />
<asp:LinkButton ID="butCancel" runat="server" Text="Cancel" 
   CommandName="Cancel" />

The multiple functions to theme the buttons and designate the appropriate icons seems rather awkward to me. I keep thinking that I should be able to either loop through some defined array of controls and icons, or tackle it in some other way that would make it easier for me in the future, particularly when I’m adding other controls to the page.

Suggestions on better ways to set this up are appreciated! Thanks!

Answer 1

I would have suggested to associate the icons with the buttons using HTML5 data- attributes, but since you’re using ASP.NET web controls it will be more complicated than it’s worth.

You can, however, store the id suffixes and their respective icons in an object literal, and use $.each() to iterate over it:

$.each({
    butFind: "search",
    butUpdate: "disk",
    butCancel: "cancel"
}, function(suffix, icon) {
    $("[id$='" + suffix + "']").button({
        icons: {
            primary: "ui-icon-" + icon
        }
    });
});