jQuery mobile cannot refresh the collapsibleset

Question

I am creating an application using jQuery mobile and loading its menu and pages form wordpress throw jsonp. I am loding its menu in the form of collapsibleset and listview but i keep on getting errors. when I try to refresh the collapsibleset by this code

$(".childnev").html(list);
$.mobile.loading( 'hide');
$('.popupmenu').slideToggle('slow');

$(".childnev").collapsibleset('refresh');

$(".childsublist").listview().listview('refresh');

It gives me this error

Error: cannot call methods on collapsibleset prior to initialization;
attempted to call method 'refresh'

And when i try to refresh by this code.

$(".childnev").html(list);
$.mobile.loading( 'hide');
$('.popupmenu').slideToggle('slow');

$(".childnev").collapsibleset();
$(".childnev").collapsibleset('refresh');

$(".childsublist").listview().listview('refresh');

It again gives me this error

TypeError: o[0] is undefined

Am I missing something or doing something wrong?

Answer 1

All you need to do is adding this

Demo

$('[data-role=collapsible-set]').collapsibleset().trigger('create');

This will enhance markup of [data-role=listview] and [data-role=collapsible-set] for the current page (active page). You can replace $('[data-role=collapsible-set]') with any selector.

---

Note(s)

• Based on the fiddle in your comment, you have many mistakes. .ready shouldn't be used with jQuery Mobile. Also, .live is no longer use, hence, replace .live with .on.

• Enhancement methods refresh, create, pagecreate and updatelayout are meant to be used for current page (active page - $.mobile.activePage) to re-apply jQuery Mobile style. For pages created dynamically and are in DOM, there is no need to use any enhancement method - not even .page() or pagecreate - because pages and their contents get enhanced once placed into DOM.