I have a few <div data-role="collapsible">...</div>in my page (I don't use a collapsible set because I want the possibility to open several at once) and then I remove them and create a few new ones with Javascript. Now I want them to have the jQuery Mobile Styling, but whatever I do, they won't refresh. I tried:

$("parentdiv").refresh();
$("parentdiv").trigger("create");
$(".ui-collapsible").refresh();
$(".ui-collapsible").trigger("create");

I even put a collapsible-set around each one and tried to do the refresh with this (described in the jQuery Mobile Documentation)

I add the new divs with $("<div data-role="collapsible">...</div>").insertBefore("#foo");

What is the proper way to do it? And is the content getting displayed in jQuery Mobile style, too, after the refresh?

UPDATE

The content of the collapsible was not refreshed here is my code:

var newColla = "<div id=\"colla" + i + "\" data-role=\"collapsible\" data-collapsed=\"true\" data-collapsed-icon=\"minus\" data-expanded-icon=\"bars\">" +
               "<h3 id=\"" + matrikelnummer + "\">" + matrikelnummer + " " + studentName + "</h3><div class=\"colla-content\">" + 
               "<div data-role=\"fieldcontain\" style=\"margin:0px;width:100%;text-align:right;\">" + 
                    "<a href=\"\" data-role=\"button\" id=\"edit_" + matrikelnummer + "_" + studentName + "\" class=\"edit ui-btn-right\" data-mini=\"true\" data-inline=\"true\" data-icon=\"edit\" data-iconpos=\"left\">Teilnehmer bearbeiten</a>" +  
                    "<a href=\"\" data-role=\"button\" id=\"delete_" + matrikelnummer + "_" + studentName + "\" class=\"delete ui-btn-right\" data-mini=\"true\" data-inline=\"true\" data-icon=\"delete\" data-iconpos=\"left\">Teilnehmer löschen</a>" + 
                "</div>";
// Für jede ausgewählte Aufgabe einen Slider hinzufügen
for (var j = 0; j < aufgaben.length; j++) {
    newColla += "<label for=\"slider_mini\">Aufgabe " + aufgaben[j] + ": (max." + allMaxPoints[j] + "Pkt.)</label>" +
    "<input type=\"range\" name=\"slider_mini_" + matrikelnummer + "_" + aufgaben[j] +"\" class=\"slider-mini allSliders\" id=\"slider_mini_" + matrikelnummer + "_" + aufgaben[j] + "\" " + theme + " step= 0.5 value=\"0\"" + 
    "min=\"0.0\" max=\"" + allMaxPoints[j] + "\" data-highlight=\"true\" data-mini=\"true\" />"; 
                                }
newColla += "</div></div>";
$(newColla).collapsible().trigger("create").insertAfter("#timer");

I have a few <div data-role="collapsible">...</div>in my page (I don't use a collapsible set because I want the possibility to open several at once) and then I remove them and create a few new ones with Javascript. Now I want them to have the jQuery Mobile Styling, but whatever I do, they won't refresh. I tried:

$("parentdiv").refresh();
$("parentdiv").trigger("create");
$(".ui-collapsible").refresh();
$(".ui-collapsible").trigger("create");

I even put a collapsible-set around each one and tried to do the refresh with this (described in the jQuery Mobile Documentation)

I add the new divs with $("<div data-role="collapsible">...</div>").insertBefore("#foo");

What is the proper way to do it? And is the content getting displayed in jQuery Mobile style, too, after the refresh?

UPDATE

The content of the collapsible was not refreshed here is my code:

var newColla = "<div id=\"colla" + i + "\" data-role=\"collapsible\" data-collapsed=\"true\" data-collapsed-icon=\"minus\" data-expanded-icon=\"bars\">" +
               "<h3 id=\"" + matrikelnummer + "\">" + matrikelnummer + " " + studentName + "</h3><div class=\"colla-content\">" + 
               "<div data-role=\"fieldcontain\" style=\"margin:0px;width:100%;text-align:right;\">" + 
                    "<a href=\"\" data-role=\"button\" id=\"edit_" + matrikelnummer + "_" + studentName + "\" class=\"edit ui-btn-right\" data-mini=\"true\" data-inline=\"true\" data-icon=\"edit\" data-iconpos=\"left\">Teilnehmer bearbeiten</a>" +  
                    "<a href=\"\" data-role=\"button\" id=\"delete_" + matrikelnummer + "_" + studentName + "\" class=\"delete ui-btn-right\" data-mini=\"true\" data-inline=\"true\" data-icon=\"delete\" data-iconpos=\"left\">Teilnehmer löschen</a>" + 
                "</div>";
// Für jede ausgewählte Aufgabe einen Slider hinzufügen
for (var j = 0; j < aufgaben.length; j++) {
    newColla += "<label for=\"slider_mini\">Aufgabe " + aufgaben[j] + ": (max." + allMaxPoints[j] + "Pkt.)</label>" +
    "<input type=\"range\" name=\"slider_mini_" + matrikelnummer + "_" + aufgaben[j] +"\" class=\"slider-mini allSliders\" id=\"slider_mini_" + matrikelnummer + "_" + aufgaben[j] + "\" " + theme + " step= 0.5 value=\"0\"" + 
    "min=\"0.0\" max=\"" + allMaxPoints[j] + "\" data-highlight=\"true\" data-mini=\"true\" />"; 
                                }
newColla += "</div></div>";
$(newColla).collapsible().trigger("create").insertAfter("#timer");

• javascript
• jquery
• html
• jquery-mobile

• Which version are you using? – Omar Commented Feb 18, 2014 at 17:57

2 Answers 2

All you need is to use .collapsible(), there is no refresh method for collapsible widget.

$(document).on("pageinit", function () {
    var collapsible = '<div data-role="collapsible"><h3>Heading</h3><p>Contents</p></div>';
    $("[data-role=content]").append($(collapsible).collapsible());
});

Demo

Try this one:

$( ".selector" ).collapsibleset( "refresh" );