jQuery Mobile not Refreshing Styles

How to enhance the markup of dynamically added content?

There are several ways of enhancing dynamically created content markup. It is just not enough to dynamically add new content to the jQuery Mobile page, new content must be enhanced with classic jQuery Mobile styling. The different enhancement levels are:-

• Enhance a single component/widget
• Enhance a page content

ENHANCE A FULL PAGE CONTENT (HEADER, CONTENT, FOOTER)

ENHANCE A SINGLE COMPONENT/WIDGET:

Every jQuery Mobile widget can be enhanced dynamically:

1. LISTVIEW:

Markup enhancement:

$('#mylist').listview('refresh');

Removing listview elements:

$('#mylist li').eq(0).addClass('ui-screen-hidden');

2. BUTTON

Markup enhancement:

$('[type="button"]').button();

3. NAVBAR
MARKUP ENHANCEMENT:

$('[data-role="navbar"]').navbar();

4. Text inputs, Search inputs & Textareas

Markup enhancement:

$('[type="text"]').textinput();

5. SLIDERS & FLIP TOGGLE SWITCH

$('[type="range"]').slider();

6. CHECKBOX & RADIOBOX

Markup enhancement:

$('[type="radio"]').checkboxradio();

7. SELECT MENU

Markup enhancement:

$('select').selectmenu();

8. COLLAPSIBLE

Markup enhancement:

$('selector').collapsible();

9. TABLE

Markup enhancement:

$(".selector").table("refresh");

10. PANELS

Panel Markup enhancement:

$('.selector').trigger('pagecreate');

Markup enhancement of content dynamically added to Panel:

$('.selector').trigger('pagecreate');

ENHANCE A PAGE CONTENT:

In case we are generating/rebuilding whole page content it is best to do it all at once and it can be done with this:

$('#index').trigger('create');

ENHANCE A FULL PAGE CONTENT (HEADER, CONTENT, FOOTER):

Unfortunately for us trigger(‘create’) can not enhance header and footer markup. In that case, we need to give

$('#index').trigger('pagecreate');

This is almost a mystic method because it is not found in any official jQuery Mobile documentation. Still, it is easily found in jQuery Mobile bug tracker with a warning not to use it unless it is really really necessary.

Note, **.trigger(‘pagecreate’);** can suppose be used only once per page refresh. Its also found to be not true.