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.

Answer 2

Since you are appending collapsible se to ther class dynamically, it cannot be refreshed, because it is not created. you need to create it.

you have to use

$(".childnev").html(list).trigger('create');

Answer 3

The collapsible set is not initialized. You are replacing the html so you need to trigger create on the element.

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

with

$(".childnev").trigger('create');

The refresh method is only used, when you are dynamically appending, removing an element.

Answer 4

For what it's worth: I ran into an issue where I tried to change content on an existing collapsible div using .html(). That would not render properly no matter what. But replacing that div (also copying its 'id) using replaceWith() then trigger('create') worked great.