javascript - jQuery Mobile refresh collapsible - Stack Overflow

admin管理员组

文章数量:1320864

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

Share Improve this question Follow edited Feb 25, 2014 at 13:22 elementzero23 asked Feb 18, 2014 at 17:47 elementzero23elementzero23 1,42933 gold badges1818 silver badges3939 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

本文标签： javascriptjQuery Mobile refresh collapsibleStack Overflow