jquery button change icon with onclick

jquery, jquery-ui

Solution

How about doing it this way: jsFiddle example.

jQuery:

$(".armdisarm").button({
    icons: {
        primary: "ui-icon-locked"
    }
});
$('button').click(function() {
    $(this).data('state', ($(this).data('state') == 'disarm') ? 'arm' : 'disarm');
    $(".armdisarm").button({
        icons: {
            primary: ($(this).data('state') == "disarm") ? "ui-icon-unlocked" : "ui-icon-locked"
        }
    });
});​

By using jQuery's .data() function to maintain the state (disarm/arm) you can toggle the icon easily.

Problem

I have a form that looks like this: ``` <form name="armdisarmform" action="/cameras" method="POST"> <input type='hidden' name='armdisarmvalue' value="ENABLED"/> <button class="armdisarm" name="armdisarmbutton" onClick='changeicon(this, "Disarm")'>Disarm</button> </form> ``` The values are populated from the server: ``` <form name="armdisarmform" action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>" method="POST"> <input type='hidden' name='armdisarmvalue' value="<?php echo $userstatus; ?>"/> <button class="armdisarm" name="armdisarmbutton" onClick='changeicon(this, "<?php echo $armdisarm; ?>")'><?php echo $armdisarm; ?></button> </form> ``` Essentially I have a button that changes its name to either "Arm" or "Disarm" based on the server records or when someone clicks it. I wanted to add the unlock/lock icons from the jquery button. So this works: ``` $(function() { $( ".armdisarm" ).button({ icons: { primary: "ui-icon-locked" } }); }); ``` But when I pass this through a function hoping to change the icons it doesn't work: ``` var changeicon = function(t, armdisarm) { if (armdisarm == "Disarm") { $( ".armdisarm" ).button({ icons: { primary: "ui-icon-unlocked" } }); } else { $( ".armdisarm" ).button({ icons: { primary: "ui-icon-locked" } }); } } ``` Is this not possible?

Original source