Jquerymobile adding dynamic collapsible divs

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?

It's unclear what you want even with your JSFiddle. Have a look at [`$.on()`](http://api.jquery.com/on/) for dynamic element event handling. — Bojangles, Feb 21 '12 at 17:26
you're using jQM RC2 which relies on jQuery 1.6.4 jQM version 1.1 is almost here which will use jQuery 1.7.x IHMO you should at least upgrade to jQM 1.0.1 and jQuery 1.6.4 — Phill Pafford, Feb 21 '12 at 17:36
@jostster That's what I used to think too, but jQuery Core 1.7.1 and jQuery Mobile 1.0 do not work 100% on BlackBerry and Windows phones. I have tested on several devices that do nothing but display a white screen. I recommend sticking to the jQuery Core that gets packed with jQuery Mobile. — Jasper, Feb 21 '12 at 18:13
@Jasper good point. We only cater to android, iPhone so we haven't tested on blackberry. Good to know though. — Bot, Feb 21 '12 at 18:20
@ca11111 jQuery Core is what you're calling `Jq`. It's jQuery, vanilla. Many times you will see it written as `jQuery Core` to distinguish between it and `jQuery UI`, `jQuery Mobile`, or one of the many plugins that calls itself `jQuery [something]`. The word `Core` is used because it is the Core dependency for these other frameworks/plugins. — Jasper, Feb 21 '12 at 21:52
ok so JQM 1.0 and jquery 1.6.4 is a best combo for both android&desktops? — , Feb 22 '12 at 11:12

score 9 · Accepted Answer · answered Feb 21 '12 at 17:39

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/

score 0 · Answer 2 · answered Feb 21 '12 at 17:44

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

Isn't that too much, if I just add one div in a full page? – Feb 21 '12 at 17:49 — , Feb 21 '12 at 17:49

score 0 · Answer 3 · answered Feb 22 '12 at 13:17

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"

score 0 · Answer 4 · answered Feb 28 '12 at 07:50

0

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

answered Feb 28 '12 at 07:50

muneebShabbir

2,500
4
29
46

Jquerymobile adding dynamic collapsible divs

4 Answers4

Linked