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?

post a jsfiddle. In which line its giving typerror? Also post your html — dejavu, Jun 29 '13 at 09:46
yes I tried them on my local machine they didn't work you can try them on jsfiddle — Abhimanue Tamang, Jun 29 '13 at 10:13
Your jsfiddle is too big and does not follow the proper way of adding content dynamically. We don't need the whole code. Just write the code for collpasible set and reproduce the problem. Its too tough to understand the whole code — dejavu, Jun 29 '13 at 10:15
I have reduced the code hope it will be easy for you now http://jsfiddle.net/jdZdG/4/ — Abhimanue Tamang, Jun 29 '13 at 10:24
In this case, you need to call it only once on the active page. The rest of dynamic pages will be enhanced automatically once inserted into DOM. So you don't need further enhancement on them. — Omar, Jun 29 '13 at 12:33
Thanks again buddy that worked by this code. $.mobile.activePage.collapsibleset().trigger('create'); — Abhimanue Tamang, Jun 29 '13 at 12:48

score 7 · Accepted Answer · edited May 23 '17 at 11:54

7

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.

edited May 23 '17 at 11:54

Community

1
1

answered Jun 29 '13 at 10:47

Omar

32,302
9
69
112

I implemented your solution but it doesn't work could you implement it on fiddle jsfiddle.net/jdZdG/4 just to know weather I have implemented in a right way. – Abhimanue Tamang Jun 29 '13 at 11:15
@AbhimanueTamang markup enhancement, should always be placed outside loop, place it right after the loop ends. – Omar Jun 29 '13 at 11:33
@AbhimanueTamang and make sure you remove any other enhancement methods e.g. `listview()` and `collapsibleset()`. use only the one above. – Omar Jun 29 '13 at 11:43
Thanks @Omar your solution worked on fiddle but in local machine I have created some pages dynamically when I remove them it works good when I add them again it start giving me that same problem. Could you guess what will be the problem ? – Abhimanue Tamang Jun 29 '13 at 12:12
@AbhimanueTamang I have updated my answer based on your comment, good luck! – Omar Jun 29 '13 at 14:06
THANK YOU, Omar! You saved my hide, big time. – iSofia May 12 '17 at 04:36
@iSofia if you're using jQM 1.4 replace `.trigger("create")` with `.enhanceWithin()`. – Omar May 12 '17 at 06:10

Subhash Sasidharakurup · Answer 2 · 2013-06-29T09:58:14.000

1

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');

edited Jun 29 '13 at 09:58

answered Jun 29 '13 at 09:50

Subhash Sasidharakurup

368
2
8

dejavu · Answer 3 · 2013-06-29T10:00:31.587

1

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.

edited Jun 29 '13 at 10:00

answered Jun 29 '13 at 09:50

dejavu

3,236
7
35
60

$(".childnev").html(list).trigger('create'); – Subhash Sasidharakurup Jun 29 '13 at 09:51
@SubhashSasidharakurup Yeah, you are correct. You can use event chaining too, or you can call the method separately. – dejavu Jun 29 '13 at 09:52

score 0 · Answer 4 · answered Apr 10 '16 at 03:12

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.

jQuery mobile cannot refresh the collapsibleset

4 Answers4

Note(s)

Linked