Question

Let me get straight to the point :). In my project I’m rendering an template, with jquery-tmpl, like this:

box = $.tmpl('<div> [....] <button></button> [....] </div>')

If I insert box in the DOM, nice JQuery buttons show up. According to the DOM (inspected with Chrome) the buttons have already been converted to jquery-ui buttons.

The question: I want to modify these buttons, but – after trying for two hours – I can’t figure out how to. I figured

$('button', box).button({'icons' : {'primary' : 'icon name'}})

for example, would do the trick, but it doesn’t. How do I modify my buttons?

Answer 1

jQueryUI generally follows a pattern of updating widgets after they’ve been initialized on DOM elements:

$("#foo").button("option", "optionname", value);

So to update the button’s icon after init, you’d do this:

$("button", box).button("option", "icons", {primary:'icon-name'});