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");
Share
Improve this question
edited Feb 25, 2014 at 13:22
elementzero23
asked Feb 18, 2014 at 17:47
elementzero23elementzero23
1,4293 gold badges18 silver badges39 bronze badges
1
- Which version are you using? – Omar Commented Feb 18, 2014 at 17:57
2 Answers
Reset to default 7All 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" );