Question

I want to change the jquery-ui button image according to the data which i stored with the element and for that i tried :

 $(document).ready(function(){                                                               
     $("#ppbutton").button({ icons: { primary: 'ui-icon-play'} }); 
 });

 /* this code is from inside function(e) where e is eventobject */
 var state = $(e.currentTarget).attr("data-state");
 state == "pause" ? 
    $("#ppbutton").button("option", "icons", { primary: "ui-icon-play" }) :
    $("#ppbutton").button("option", "icons", { primary: "ui-icon-pause" });

But this above code is not changing the button image.I can`t use toggleClass here because it is not necessary, that each time when function called, the image changes. Help me out please?

Answer 1

To update the image property, you need to run the $("#ppbutton").button( "refresh" ) method

http://jqueryui.com/demos/button/#method-refresh

Have a nive day