jQuery mobile style not being applied

Question

I'm trying to create a dynamic collapsible list. The data is pulling through the ajax and listing out just fine, but the jQuery mobile styling is not being applied and I have no clue how to correct this. I've tried several things that I have found on the internet, but nothing seems to work. Here is the code that I'm using.

function button_directory(){
section_directory = document.getElementById("section_directory");
$("#display_area").fadeOut("slow", function(){
    display_area.innerHTML = "";
    title_bar.innerHTML = "DIRECTORY";

    $("#display_area").fadeIn("slow", function(){
    });

    var directoryURL = protocol + domain + "query.php?sid="+code;
    $.ajax({
        url: directoryURL,
        dataType: "json",
        success: function(members) {
            if(members.length > 0) {
                temp = '<div data-role="collapsible-set" id="collapsible">';
                $.each(members, function(index, value) {
                    temp +=
                        '<div data-role="collapsible" data-collapsed="true">'+                       
                            '<h3>'+value.firstName+' '+value.lastName+' - '+value.title+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+value.type+'</h3>'+
                            '<p><strong>Company:</strong> '+value.company+'<br>'+
                            '<strong>territory:</strong> '+value.territory+'<br>'+
                            '<strong>Clients:</strong> '+value.clients+'</p>'+
                        '</div>';
                });
                temp +='</div>';
                display_area.innerHTML = temp;
                $("#collapsible").trigger("create");

                //$("#display_area").find("div[data-role=collapsible]").collapsible();

                //$("#display_area").trigger('create');
            } else {
                return false;
            }
        }
    });
});

}

Yes, but it didn't work. Even tried **$("#display_area").collapsible('refresh');** and **$("#display_area").trigger('create');** — The Duke Of Marshall שלום, Apr 01 '13 at 19:27
have you tried: $( "#collapsible" ).collapsibleset( "refresh" ); — Phill Pafford, Apr 01 '13 at 19:52

score 0 · Answer 1 · answered Apr 01 '13 at 20:01

0

Have you tried looking at the jQuery 1.3 docs?

Take a look at http://api.jquerymobile.com/collapsible/#event-create and see if it helps

answered Apr 01 '13 at 20:01

krilovich

3,475
1
23
33

jQuery mobile style not being applied

1 Answers1