Change data-icon on click with jquery mobile

Question

This is my code:

function togglePOIAndDisplay(toggle){
    var display = $(toggle).attr('data-icon');
    console.log(display);
    if(display == 'minus'){
        $(toggle).attr('data-icon', 'check');
            console.log(display);
    } else {
        $(toggle).attr('data-icon', 'minus');
        removeMarkers(toggle);
    }
}   

It will log minus to the console and go into the first if() block and executes displayAllPOIOfType() correctly, but it will not reflect the change of the value although it gets set correctly. Any ideas why that is, because it obviously reads/sets the attribute correctly.

Is there an update function I need to call? thanks

Answer 1

This depends on whether it's a button, or a select, or some other thing that accepts the data-icon attribute. Unfortunately, jQuery Mobile doesn't have great support for dynamically changing things controlled by data-* attributes, so you'll have to adjust the attribute as well as modify the classes on the child elements.

For buttons, something like this ought to work:

$(buttonSelector).attr('data-icon', newIcon);
                 .find('.ui-icon')
                     .addClass('ui-icon-' + newIcon)
                     .removeClass('ui-icon-' + oldIcon);

Answer 2

If the icon is inside a button like this:

<a id="buttonID" href="#" data-role="button" data-icon="delete">Button</a>

You can change the icon with the buttonMarkup function:

$('#buttonID').buttonMarkup({ icon: "check" });

Or to your custom icon:

$('#buttonID').buttonMarkup({ icon: "my-icon" });

Example: http://jsfiddle.net/u8fnJ/1/

As shown in this post How to refresh a button in a header with jQueryMobile?