CODEWITHSUNDEEP
jqueryjquery-ui
Tom
Tom

Reputation: 2634

jquery button change icon with onclick

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?

Upvotes: 3

Views: 24127

Answers (3)

emale
emale

Reputation: 327

If you really are using the jquery-ui button class you could make use of the option method:

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

(Using jQuery UI 1.12 here which changes {icons: {primary: "ui-icon-locked" }} to {icon: "ui-icon-locked" })

Upvotes: 0

Jeff B
Jeff B

Reputation: 30099

The problem seems to be due to calling your function via an inline handler:

<button class="armdisarm" name="armdisarmbutton" onClick='changeicon(this, "Disarm")'>Disarm</button>

You likely have defined changeicon outside of the global scope, such as in a $document.ready() block. Using inline handlers is bad practice anyway. You are best off attaching your handlers in your javacsript code block. If your object are populated dynamically, use .on() to delegate your handler to a parent object (such as body).

With a little extra CSS, you can also change your icon/text with a couple of toggleClass calls:

HTML:

<button class="armdisarm" name="armdisarmbutton">
    <span class="disarm">Disarm</span>
    <span class="arm">Arm</span>
</button>

CSS:

.arm {
   display: none;  
}
.disarmed .arm {
   display: inline;   
}
.disarmed .disarm {
   display: none;   
}

JavaScript:

$("body").on('click', ".armdisarm", function() {
    $(this).toggleClass('disarmed')
        .find('.ui-button-icon-primary')
        .toggleClass("ui-icon-locked ui-icon-unlocked");
    return false;
});

Demo: http://jsfiddle.net/jtbowden/GPKrP/

If you want to "hack" a little more, you can do this with a single toggleClass:

CSS:

.arm {
   display: none;   
}
.disarmed .arm {
   display: inline;   
}
.disarmed .disarm {
   display: none;   
}
.disarmed .ui-button-icon-primary {
    background-position: -208px -96px;
}

JavaScript:

$("body").on('click', ".armdisarm", function() {
    $(this).toggleClass('disarmed');
    return false;
});

In your PHP, just add class disarmed to your button if it is disarmed.

Demo: http://jsfiddle.net/jtbowden/GPKrP/1/

Upvotes: 2

j08691
j08691

Reputation: 207861

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.

Upvotes: 6

Related Questions