Jquerymobile adding dynamic collapsible divs [duplicate]

Question

Possible Duplicate:
Dynamically adding collapsible elements

I would like to know how I could dynamically add a collapsible div, such a thing can be done with Jqm listviews, calling lisview('refresh') after

here is the testing code:

http://jsfiddle.net/ca11111/UQWFJ/5/

edit: in above, it's appended and rendered, but multiple times

edit2: seems working like this?

Answer 1

How about omitting the refresh since you are initializing the element (not refreshing it):

$('<div data-role="collapsible" data-collapsed="true"><h3>22</h3><span>test</span></div>').appendTo($('#coll div:first'));

$('#coll').find('div[data-role=collapsible]').collapsible();  

Here is an updated version of your JSFiddle: http://jsfiddle.net/UQWFJ/7/ (Notice I changed your setTimeout to a setInterval to continuously add new elements to the DOM)

Also you could optimize this by saving the new element in a variable so you can call .collabsible() on just that element:

var $element = $('<div data-role="collapsible" data-collapsed="true"><h3>22</h3><span>test</span></div>').appendTo($('#coll div:first'));

$element.collapsible();  

Here is a JSFiddle with this optimization: http://jsfiddle.net/UQWFJ/9/

Answer 2

jQM Docs:

• http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html

Enhancing new markup
The page plugin dispatches a pagecreate event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.

However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).

For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

Answer 3

I'm not sure if this is what you want, but if all you want to do is to be able to dynamically add collapsible divs, you can do this on the code side. For example I use aspx.vb but if you use some other language than you can easily adapt this for your situation. In your .aspx(html code) write this line of code where you want your dynamic html code to appear.

<asp:Literal ID="CollapseMe" runat="server"></asp:Literal>

Once this is done, right click on the screen and choose "view code"

Then you add this

Protected Sub page_load(ByVal Sender As System.Object, ByVal e As System.EventArgs) Handles    MyBase.Load

Dynamic()

End Sub 



Public Sub Dynamic()
    Dim strHtml As New StringBuilder
    Dim strJava As New StringBuilder
    Dim dblNumCollapsibles As New Double

    dblNumCollapsibles = 7

    For i = 1 To dblNumCollapsibles

        strHtml.Append("<div data-role=""collapsible"" data-theme=""c"" data-collapsed=""false"">" _
                                        & "<h3>Title of Collapsible</h3>" _
                                        & "<p data-theme=""a"" style=""white-space: normal;"">" _
                                        & "The text inside of the Collapsible" _
                                        & "</p>" _
                                    & "</div>")


    Next

    Me.CollapseMe.Text = strHtml.ToString

This will dynamically add 7 Collapsible div listbars. You can alter this by changing "dblNumCollapsibles"

Answer 4

create html of Collapsible div dynamically add to some div and on that div call .trigger('create') $(div).trigger('create') this will create that div and renders the collapsible div