0

I have a little fiddle that I modified to demonstrate the problem I'm currently having http://jsfiddle.net/TPxT7/. Basically I need the textboxes to have the nice jQuery Mobile style, but regardless of what I refresh or trigger nothing seems to change. The collapsibles are always going to be created dynamically.

I'll attach the codes in-case there is something wrong with the links:

HTML:

<div id="medListDiv" data-role="collapsible-set" data-theme="e" data-content-theme="e" style="padding:10px;">

</div>

SCRIPT (Sorry about lack of indentation):

$(function() {
var key, value;
var Storage = 5
// loop through local storage
for (var i = 0; i < Storage; i++) {
// retrieve the key
key = i;
// set the field from the key
value = "Medicine" + i.toString();

//$("#medListDiv").show();
var text = '<div data-role="collapsible" data-collapsed="true" data-iconpos="right">' + '<h2>' + value + '</h2>' + '<input type="text" placeholder="Quantity" />' + '<textarea cols="40" rows="4" placeholder="Type any directions written on your prescription for the above medicine." ></textarea></div>';
 $("#medListDiv").append(text);
 }

 $('#medListDiv').find('div[data-role=collapsible]').collapsible();
//$('.ui-collapsible-set').collapsible("refresh");
//$("#medListDiv").trigger("create");
//$('.ui-collapsible-set').trigger("create");
});

As you can see at the bottom I have tried adding the following bits of codes (not all at once):

$('.ui-collapsible-set').collapsible("refresh");
$("#medListDiv").trigger("create");
$('.ui-collapsible-set').trigger("create");

and I have also tried to follow some of the answers give on This question but nothing seems to make any difference, maybe I'm missing something, but I can't seem to work my head around it.

To makes things more clear, I want it too look like this Fiddle I created in static mode.

Any suggestions or ideas will be greatly appreciated.

Community
  • 1
  • 1
Scur4
  • 154
  • 1
  • 13

1 Answers1

0

After a silly thought and a quick look around other questions and answers I solved it by just adding the following: 

$('#medListDiv').find('div[data-role=collapsible]').collapsible();
$('#medListDiv').collapsibleset("refresh"); //This did the trick
$('#medListDiv').trigger("create");

Thank you for reading/passing by :)

Scur4
  • 154
  • 1
  • 13
  • 1
    `.collapsibleset()` is enough to refresh all collapsibles within. – Omar Nov 21 '13 at 18:23
  • Yes :D I discovered that and would hardly ever forget now as I spent a while searching for it lol – Scur4 Nov 22 '13 at 12:14
  • Would it be inappropriate to ask you here why this [Fiddle](http://jsfiddle.net/JWxrD/) wont behave like this new [Fiddle](http://jsfiddle.net/m5xUz/). I have "improved" upon my original question and I can't seem to know whats wrong. Please let me know if I should modify my question or create a new one, but any suggestions on this would be appreciated. – Scur4 Nov 22 '13 at 13:19
  • 1
    You're adding collapsibles to a collapsible, not a collapsible-set. check this http://jsfiddle.net/Palestinian/j8BSv/ I used `.trigger("create")` just to apply styles on collapsibles contents. – Omar Nov 22 '13 at 13:28
  • Yes thats what I wanted, to nest individual collapsibles into a collapsible :) I managed it! Here is what I meant http://jsfiddle.net/PTWtL/, apparently just needed to assign which div to append it into like `div:first` on `$("#medListDiv div:first").append(text);`. Thank you though! :D (I should really stop asking before trying a bit harder -_-) - Sorry :( – Scur4 Nov 22 '13 at 13:38
  • you mean `.ui-collapsible-content` div ;) – Omar Nov 22 '13 at 15:15