Search jQuery

jQuery Forum

Dynamically add collapsible div

in jQuery Mobile • 2 years ago

I'm trying to dynamically add a collapsible div (which will in turn also contain a list), but can't seem to get styles to apply after inserting content.

I've tried calling ".page()", but that doesn't seem to have any effect.

The page that I'm loading (things are simplified somewhat for the sake of example):

<div data-role="page">
<div data-role="content" class="contentClass">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true"><h3>Content A</h3></div>
<div data-role="collapsible" data-collapsed="true" class="appendBefore"><h3>Content B</h3></div>
<div data-role="collapsible" data-collapsed="true"><h3>Content C</h3></div>
</div>
</div>
</div>

The script I'm loading:

jQuery("[data-role='page']").live('pageshow',function(event){
// Begin things that only happen on specific pages
var pageEl = jQuery(this);
var contentEl = pageEl.find("div[data-role='content']:first");
if (contentEl.is(".contentClass"))
{
         jQuery.post('/myServlet/', {"param": "value"}, function(data) {
                jQuery('.appendBefore').before(data);
                pageEl.page();
         });
}
});

The .post is loading the following content (which does appear to be inserted into the page):

<div data-role="collapsible" data-collapsed="true"><h3>Inserted Content</h3>
<ul data-role="listview" data-inset="true"><li>This is a test</li></ul>
</div>

Replies(13)

xeronz

Re: Dynamically add collapsible div

2 years ago

I posted a similar thread to this about a month back and yet no one responds... So again I ask...

how can we have jQM re-render the entire page (or just a div) to include form and listview formatting?

(Original threaD: http://forum.jquery.com/topic/a-few-questions-dom-rerendering-form-transitions)

saycat

Re: Dynamically add collapsible div

2 years ago

Since the required classes were not being applied to the child nodes dynamically, I have come up something that's definitely not the best solution but gives me an effective workaround for now:
I pre-create collapsible nodes - these will automatically have all required styling applied to their children.
At run-time, when I need to create the nodes dynamically, I make copies of the 'template' node (using clone) and append them to the root nodes with with appropriate modifications.

maxcan

Re: Dynamically add collapsible div

2 years ago

I have the same problem.

In one instance (dynamically adding a list to a div) the solution was to not have any IDs in my HTML and I had to replace all IDs with classes. Its ugly, slower, and wreaks of voodoo coding. I really hope this gets solved in a3.

-M

b1xml2

Re: Dynamically add collapsible div

2 years ago

Hi All,

The solution at hand is simple:

I am injecting html code via jQuery's ajax calls and Microsoft's MVC. This is what I did in the success function.

I am injecting the following snipped html into the div with the id results:

<h3 id="results-header">2010 Discovery 40X</h3>

Hello World!

</div>

The ajax call is as follows:

$.ajax({

type: 'POST',

cache: false,

url: '/find-rvs/ajax/',

data: payload,

success: function (data) {

var el = $('#result');

el.html(data);

el.find('div[data-role=collapsible]').collapsible({theme:'c',refresh:true});

}

});

oddbox

Re: Dynamically add collapsible div

1 years ago

It is not always that simple. I'm building a simliar page, but I need to create the entire collapsible-structure with javascript, on the basis of json-code fetched with $.ajax/$.getJSON. I do not know beforehand how many or if there will be any content to show.

egut125

Re: Dynamically add collapsible div

2 years ago

I am extrememly new to JQuery and especially to ajaz, so can anyone explain what the above ajax call is doing? Hopefully in detail, possibly line by line?

jkelley05

Re: Dynamically add collapsible div

2 years ago

The first and the last lines are a method call $.ajax(); The { } nested inside the method call are used for passing different options to the call.

$.ajax({ //Function call start
type: 'POST', //What kind of http request to make
cache: false, //Don't use cache
url: '/find-rvs/ajax/', //The URL to make the ajax request of
data: payload, //The var with the data to send to the request page
success: function (data) { //If ajax call was successful run this function with the returned data
var el = $('#result'); //Store a jQuery object of the result element in el
el.html(data); //Replace the html in el with the returned data
el.find('div[data-role=collapsible]').collapsible({theme:'c',refresh:true}); //See below *
} //End of function
}); //End of options and function call

*Explanation of line 9, piece by piece:

el.find() - Find every child element matching a selector
'div[data-role=collapsible]' - matches every div in el where the attribute data-role is collapsible
.collapsible({theme:'c',refresh:true}); - calls the method collapsible on matched items with the options for theme and refresh.

Hope this helps.

clutchg

Re: Dynamically add collapsible div

1 years ago

<label for="ad">Address:</label>

Can this be refreshed the same way ?

And to answer it yeah

el.find('div[data-role=collapsible]').collapsible({theme:'e',refresh:true});

el.find('input,textarea').textinput({theme:'e',refresh:true});

indianapa..

Re: Dynamically add collapsible div

8 months ago

Not sure if this well help anyone as this post is very old but I was recently trying to use templates and mobile framework to create collapsible sets. Nothing seemed to work until i placed the code for getting the data and setting the template before the definition of the mobile js files.

Works like a charm now with no special work arounds. Hope this helps someone.

haga0054

Re: Dynamically add collapsible div

8 months ago

I think I see what you are doing, but this may not be the best way to do it. The reason is you get the data before JQM enhances the data. While this is fine, it won't help for every case. What you really need to do is find the correct 'create' or 'refresh' method to apply to the dynamic content. There are plenty of threads about this.

edubsb

Re: Dynamically add collapsible div

7 months ago

Nothing more annoying than "useless dead-end" posts which litter the internet. If you know of an answer or a source that could be of better help then share it :P.

Here is a link to a tut that provides a step-by-step on how to work with dynamically injected collapsible divs:

Dynamically create an accordion menu (scroll all the way down to see the example on how to:"Get the contents of the accordion menus by Ajax")

Next time we take time to reply to a post, let's make good use of it shall we? ;)
'Cause sharing is caring! Enjoy!

Or this: http://jquerymobile.com/test/docs/pages/page-dynamic.html

haga0054

Re: Dynamically add collapsible div

7 months ago

... This thread is 1 year old. Who didn't make good use of it? The only person not making good use of it is you! All the answers above WERE correct, they are just out dated...

As I stated to the other late response, you need to find the correct 'refresh' or 'create' method which is found in the official jquery mobile documentation FOR the version you are using. There are many threads about adding dynamic content.

To my point above:

The first tutorial you gave is extremely out dated. There is some incorrect information there. While it does look like a useful site, I would proceed with caution.
You linked to the test version of documentation. What you really should do is link to the documentation version the OP is using, not link test documentation.

bakerj417

Re: Dynamically add collapsible div

6 months ago

$('#collapsible').trigger('create');

I am creating collapsibles on the fly and inserting listviews within them. So i needed to create the collapsible. This worked for me.

Top Reply

Response title

Attachments

jQuery Forum

Dynamically add collapsible div

Replies(13)

Re: Dynamically add collapsible div

Re: Dynamically add collapsible div

Re: Dynamically add collapsible div

Re: Dynamically add collapsible div

Re: Dynamically add collapsible div

Re: Dynamically add collapsible div

Re: Dynamically add collapsible div

Re: Dynamically add collapsible div

Re: Dynamically add collapsible div

Re: Dynamically add collapsible div

Re: Dynamically add collapsible div

Re: Dynamically add collapsible div

Re: Dynamically add collapsible div

Statistics

Tags

Actions

Related Posts