Change all data-theme attributes in JQM on a button click

Question

I'd like to programmatically change ALL data-theme attributes in the whole document to "a" after I click on a button. I have divs with the data role = page, header, content, footer, dialog, selectmenu, listview. I guess these are all the selectors. Are there any possibilities to achieve that? I have a single-page-app. What I've tried so far:

$(document).delegate('[data-role="page"]', 'pagechange', function (e) {
    $.mobile.page.prototype.options.theme  = "a";
});

$(document).delegate('[data-role="page"]', 'pagechange', function (e) {
    $(this).removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e').addClass('ui-body-a').attr('data-theme', 'a');
});

then just

$.mobile.page.prototype.options.theme  = "a";

but none of these worked for me.

Answer 1

You can achieve what you want by directly selecting the elements you want to change:

$("[data-theme='<old_theme_swatch>']").attr('data-theme', '<new_theme_swatch>');

Also, you might want to trigger an update event on the modified widgets to get them effectively show with the new theme style. This way, jQuery Mobile will re-enhance all the interested elements changing their associated theme ui-* class (please note that ui-body-* isn't the only class that need to be changed, eg: ui-bar-*).