jQuery mobile dynamically added theme to page

Question

I\'m building a new page dynamically using jQuery mobile. I would like to now add the theme i.e. data-theme=\"a\" . Is there an easier way to do this? At the m

Answer 1

Update - jQuery Mobile 1.4

There is a bug in .page() widget when using .page({"theme"}) or .page("option", "theme"). It doesn't remove current theme class, however, it adds new theme class. Yet, new class doesn't override old class. So here is the fix.

(function($, undefined) {
  $.widget("mobile.page", $.mobile.page, {
    _setOptions: function(o) {
      if (o.theme !== undefined) {
        this.element
          .removeClass(function(i, c) {
            return (c.match(/\bui-page-theme-\w/g) || []).join(' ');
          })
          .addClass("ui-page-theme-" + o.theme);
      }
    }
  });
})(jQuery);

Note: Default theme in jQuery Mobile is "a".

---

To set theme for dynamically created pages, use $('.selector').page({theme:'e'}); after you append pages and before you navigate to them using $.mobile.changePage().

For a specific page:

$('.selector').page({theme:'e'});

For all pages:

$('[data-role=page]').page({theme:'e'});

---

Demo - Updated with .page() fix