jQuery Mobile creating a Collapsible set dynamically via ajax does not apply styling

Question

Possible Duplicate:
Dynamically adding collapsible elements

I am dynamically creating a Collapsible set and adding it to the page using $('#myID').html(htmlcode). The styling is not being applied to the page. How can I get jQUery mobile to apply it styling?

(I am using $.get() to query a web service.The content that returned I am looping through to create the markup)

Hey, nice question. Do you already have found a solution to this? Thanks — Michael W., Sep 26 '11 at 20:24

score 5 · Answer 1 · edited Feb 14 '12 at 11:58

This is working for me. My ajax returns a bunch of h3's which I insert into a collapsible div and append a p tag for the content.

$(document).ready(function(){

    $.get(my_url, function(data) {
        var content = $('div[data-role="content"]').html(data);
        $('h3').each(function(h3_element) {
            var coll = $('<div class="ui-collapsible-contain" name="blog"  data-role="collapsible" data-collapsed="true">');
            coll.append($(this));
            coll.append($('<p>'));
            content.append(coll);
        });
        content.trigger( "create" );        
    });

});

and no, refresh trigger didn't work either... – Bjorn Oct 07 '11 at 19:40 — Bjorn, Oct 07 '11 at 19:40

score 3 · Answer 2 · edited May 23 '17 at 09:59

3

Already answered in Jquery Mobile Collapsible Content

To initialize your div correctly after preventing the default init formating, you'll have to use something like $("a way to select your div").trigger('create'); as specified here: http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/page-scripting.html

edited May 23 '17 at 09:59

Community

1
1

answered Sep 30 '11 at 12:32

Jesus

31
2

score 1 · Answer 3 · edited Jan 26 '12 at 10:08

1

$content.find(":jqmData(role=collapsible)").collapsible();

edited Jan 26 '12 at 10:08

Aliaksei Kliuchnikau

13,589
4
59
72

answered Jan 26 '12 at 09:38

Totoro

156
2
13

1

This was how my team was doing it at first, but it caused problems with the styling when performed on a `collapsible-set` as well as the `collapsible`s inside. Using `.trigger('create')` fixed it. – lime Apr 08 '12 at 17:47

score 0 · Answer 4 · answered Oct 20 '11 at 08:14

0

Collapsible content and Ajax loading

answered Oct 20 '11 at 08:14

neoneye

50,398
25
166
151

jQuery Mobile creating a Collapsible set dynamically via ajax does not apply styling

4 Answers4

Linked