CODEWITHSUNDEEP
jquerylistviewjquery-mobile
Bob-ob
Bob-ob

Reputation: 1618

jquery mobile data-icon

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.

Upvotes: 5

Views: 14300

Answers (3)

user521990
user521990

Reputation: 829

$("#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

Upvotes: 12

Leon
Leon

Reputation: 4532

You should really use the JQM selectors for that, jqmData() as specified in the documentation.

e.g.

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

Hope this helps solving your issue

Upvotes: 2

Phill Pafford
Phill Pafford

Reputation: 85378

Related:

Live Example:

Link to Question that is related:

Upvotes: 4

Related Questions