How To Update The Styles To A Listview In Jquery Mobile?

i am getting some data from a server and i create a ul list that i am trying to update the styles. it seems that listview('refresh',true) doesn't work. I am using jqm 1.4 beta func

Solution 1:

As of jQuery Mobile 1.4 Alpha 2, .trigger('create') and .trigger('pagecreate') are deprecated and will be removed from 1.5.

The replacement of those function is .enhanceWithin(), when it is called on parent element, all widgets within will be enhannced.

Also, the correct syntax / markup of a collapsible is

<div data-role="collapsible">
  <h4>Heading</h4> <!-- you were missing this tag -->
  <p>collapsible / expandable contents</p>
</div>

To enhance listview and collapsible, all you need is

$('#div').enhanceWithin();

---

Update

Collapsibles are inheriting margin from parent li, resulting in styling collapsible's heading and content inadequately. Adding the below CSS fixes this issue.

li .ui-collapsible-heading, .ui-collapsible-heading-toggle {
  margin: 0 !important;
}

li .ui-collapsible-heading-collapsed .ui-collapsible-heading-toggle {
  margin-bottom: 1px !important;
}

Demo