CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Gautam Krishnan
Gautam Krishnan

Reputation: 722

How to obtain a dynamic JQuery Mobile Accordion?

I was trying to design a basic RSS feed reader using PhoneGap and JQuery Mobile. The page loads first and it takes time for the feeds to show up. I'm trying to add an accordion to each post so that the user gets to see the post title and expand the post if interested. This is the snippet i used:

for (var i = 0; i < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
    var title = entry.title,
    link = entry.link,
    description = entry.contentSnippet,
    pubDate = entry.publishedDate;
    feedItem = feedItem + '<div data-role="collapsible" data-theme="a" data-content-theme="a"><h3><a href="' + link + '>';
    feedItem = feedItem + '<span class="feeditemtitle">' + title + '</span>';
    feedItem = feedItem + '</a></h3>';
    feedItem = feedItem + '<h6>' + pubDate + '</h6>';
    feedItem = feedItem + '<p>' + description + '</p></div>';
}

I am able to get the posts on the page but there is no accordion. It renders the posts as plain HTML. I assume it is because the posts load after the page is loaded. Can anyone please help me with this?

Upvotes: 0

Views: 1431

Answers (2)

Max Hudson
Max Hudson

Reputation: 10226

for (var i = 0; i < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
    var title = entry.title,
    link = entry.link,
    description = entry.contentSnippet,
    pubDate = entry.publishedDate;
    feedItem = feedItem + '<div data-role="collapsible" class="accordItem" data-theme="a" data-content-theme="a"><h3><a href="' + link + '>';
    feedItem = feedItem + '<span class="feeditemtitle">' + title + '</span>';
    feedItem = feedItem + '</a></h3>';
    feedItem = feedItem + '<h6>' + pubDate + '</h6>';
    feedItem = feedItem + '<p>' + description + '</p></div>';
    if(i == result.feed.entries.length-1){
        $(".accordItem").collapsible();
    }
}

Upvotes: 0

Florent
Florent

Reputation: 12420

You have to refresh the loaded content.

Assuming it is appended to this node <div id="loaded-content" data-role="collapsible-set"></div> you have to do:

$('.loaded-content').collapsibleset('refresh');

You can look at my fiddle which emulates an Ajax call and create the accordion with a delay: http://jsfiddle.net/ooflorent/FkT8H/

Upvotes: 3

Related Questions