Problem with adding an icon to a button with jquery ui

Question

All of my other buttons are showing up formatted correctly, with icons attached, aside from the createSave class button, in the after() function string. Anyone know what's up?

Jquery:

        $(".save,.createSave").button({
            icons: {
                primary: "ui-icon-disk"
            }
        });

        $('#newJudgeLink').click(function(){
            $(this).hide();
            $('#tableJudges tr:first').after('<tr class="altr" id="newCreateRow"><td><button class="createSave">Save</button></td><td><input type="text" id ="createJudgeName" value="Last Name"/></td><td><?php $x = getSections(); echo '<select id="createJudgeSection">';   foreach($x as $y){ echo "<option>$y</option>"; } echo "</select></td><td>Active</td></tr>"; ?>');
});

Richard Dalton · Accepted Answer · 2011-09-13 15:12:04Z

1

It looks like you're calling the button function before you've actually created the button. Try doing this:

$('#newJudgeLink').click(function(){
  $(this).hide();
  $('#tableJudges tr:first').after('<tr class="altr" id="newCreateRow"><td><button class="createSave">Save</button></td><td><input type="text" id ="createJudgeName" value="Last Name"/></td><td><?php $x = getSections(); echo '<select id="createJudgeSection">';   foreach($x as $y){ echo "<option>$y</option>"; } echo "</select></td><td>Active</td></tr>"; ?>');
  $(".createSave").button({
        icons: {
            primary: "ui-icon-disk"
        }
    });
});

answered Sep 13, 2011 at 15:12

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jmar777 · Accepted Answer · 2011-09-13 15:13:50Z

1

It looks like you want to both run the jQuery UI plugin against the whole document on load, but then run it again against any newly created buttons. In this case it's probably easiest to create a reusable function that lets you pass in a context. E.g.,

function makeUIButtons(context) {
    $(context).find('.save, .createSave').button({
        icons: {
            primary: "ui-icon-disk"
        }
    });
}

// update existing buttons on load
makeUIButtons(document);

$('#newJudgeLink').click(function(){
    $(this).hide();
    var $newRow = $('<tr class="altr" id="newCreateRow"><td><button class="createSave">Save</button></td><td><input type="text" id ="createJudgeName" value="Last Name"/></td><td><?php $x = getSections(); echo '<select id="createJudgeSection">';   foreach($x as $y){ echo "<option>$y</option>"; } echo "</select></td><td>Active</td></tr>"; ?>');
    // update buttons in our new row
    makeUIButtons($newRow[0]);
    $newRow.insertAfter('#tableJudges tr:first');
});

answered Sep 13, 2011 at 15:13

jmar777

39.8k11 gold badges68 silver badges66 bronze badges

1 Comment

Tim H Over a year ago

Never thought to do it that way. Great idea. Thanks!

Matt Harpster · Accepted Answer · 2011-09-13 15:15:13Z

1

Its a bit hard to say without a little bit more to go on. Do you have a link we can refer to?

I'm assuming in your css style sheet (not in-line right? :) ) has the styles specified for the button.createSave. If I were to wager a guess I'd bet its a css selector conflict (two different css styles conflicting with each other). But with a url to check and inspect I'd be able to provide a better answer for you.

Hope this helps

PS when in doubt... inspect with firebug (a firefox debugging extension, also available for chrome, safari probably has something comparable as well, IE has the developer toolbar, which works but in classic Microsoft fashion a little wonky)

-Matt

answered Sep 13, 2011 at 15:15

Matt Harpster

334 bronze badges

Collectives™ on Stack Overflow

Problem with adding an icon to a button with jquery ui

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related