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

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