jquery mobile data-icon

Question

Hi I am having difficulty changing some attributes in jquery mobile dynamically for some reason. I can see that the attributes are being changed in the markup when I call the respective methods I am using but the appearance of the elements does not change. Is there a need to reinitialize a lists etc in Jquery Mobile?

By the way here is some code to show you how I am setting the attributes:

$('.className').each(function(){
    if ($(this).text() == tempLoc){
    console.log('FOUND MATCH WITH tempLoc and ' + $(this).text());
    $(this).attr('data-icon','alert');
    $(this).attr('data-theme','e');
}
});

As I said this is working in code but the elements don't update or change appearance-wise. Any ideas?

UPDATE: I have found a way to update the data-icon but it is of course still messy and unnecessarily so. You can access the data-icon using the following method:

$(this).children('div.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-arrow-r');
$(this).children('div.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-alert');

In that case $(this) refers to the button itself and the icon itself is found in it's ui-btn-inner child's span. ui-icon-arrow-r will result. Substitute whatever classes you are using in this case. If anybody knows of a way to refresh the buttons correctly I would appreciate it.

Answer 1

$("#myButtonName").buttonMarkup({ icon: "star" });

This will change it on the fly. Here is my code:

$(".menu-button").toggle(
    function()
    {            
        $(this).buttonMarkup({ icon: "star" });
        $(".navigation-menu-container").show();
    },
    function()
    {
       $(".navigation-menu-container").hide();    
    }
);

See docs here:

http://jquerymobile.com/test/docs/buttons/buttons-options.html

Answer 2

Related:

Live Example:

• http://jsfiddle.net/phillpafford/8pwFK/29/ (The color and Icons change when you click them)

Link to Question that is related:

• Specifying the styles for the selected tab in a navbar