collapsible-set in phonegap using jquery won't work properly

Question

I am trying to create a collapsible-set in phonegap. Its pulling the RSS feed details in to create a list. I want the list to be a collapsible set.

However when I set it up how a normal collapsible-set is suppose to be, it no long imports the lists and I get a blank screen for the content are.

I have been able to get it to slightly work but I have a collapsible-set inside a listview which I do not want. However getting rid of the list and changing it all to how WC3 shows how to create a collapsible-set screws up and won't pull the feeds.

Any ideas on how to make this work correctly?

I want my list to look like this: the first example seen here: http://demos.jquerymobile.com/1.2.0/docs/content/content-collapsible-set.html

but when I set it up like this: It comes up blank.

<script type="text/javascript">
   function initializeLifeHacker() {
            url = 'http://feeds.gawker.com/lifehacker/full';
            var feed = new google.feeds.Feed(url);
            feed.setNumEntries(25);
            feed.load(function(result) {
            var postlist = result.feed.entries;
            var html = '<div data-role="collapsible" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" class="entry">';
            $.each(postlist, function(idx, data) {
            html += '<a href="#" onclick="window.open(\'' + data.link + '\', \'_blank\', \'location=yes\')">';
            html += '<h2>' + data.title + '</h2><p class="author"> Author: ' + data.author + '</p><p class="description">' + data.contentSnippet + '</p>';
            html += '</a>';
            });
            html += '</div>';
            $("#lifeHackerFeedlist").append(html);
            $("#lifeHackerFeedlist div[data-role=collapsible]").collapsible();
            });
            }

            $(document).ready(function(){
            google.load("feeds", "1",{callback:initializeLifeHacker}); 
            });    
        </script>

<div role="main" class="ui-content">
   <div id="lifeHackerFeedlist" data-role="collapsible-set"></div>
 </div><!-- /content -->

so I tried:

<script type="text/javascript">
   function initializeLifeHacker() {
            url = 'http://feeds.gawker.com/lifehacker/full';
            var feed = new google.feeds.Feed(url);
            feed.setNumEntries(25);
            feed.load(function(result) {
            var postlist = result.feed.entries;
            var html = '<ul data-role="listview" data-inset="true" data-theme="a">';
            $.each(postlist, function(idx, data) {
            html += '<li>';
            html += '<a href="#" onclick="window.open(\'' + data.link + '\', \'_blank\', \'location=yes\')">';
            html += '<div data-role="collapsible" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" class="entry"><h2>' + data.title + '</h2><p class="author"> Author: ' + data.author + '</p><p class="description">' + data.contentSnippet + '</p></div>';
            html += '</a>';
            html += '</li>';
            });
            html += '</ul>';
            $("#lifeHackerFeedlist").append(html);
            $("#lifeHackerFeedlist ul[data-role=listview]").listview();
            });
            }

            $(document).ready(function(){
            google.load("feeds", "1",{callback:initializeLifeHacker}); 
            });    
        </script>

<div role="main" class="ui-content">
   <div id="lifeHackerFeedlist" data-role="collapsible-set"></div>
 </div><!-- /content -->

which results in a collapsible inside a collapse, so a nested collapse, which I don’t want Here is the result: it looks similar to this: https://i.stack.imgur.com/8OsAU.jpg

how do I get the look that I want?

Thank you in advance,

score 0 · Accepted Answer · answered May 28 '15 at 13:57

0

Your code only creates one collapsible with all articles added to it because you put that line outside the $.each(). Also, you can't surround the whole collapsible in an anchor, because the collapsible header anchor toggles the collapsible open and closed. Instead, you can either surround the content or add a button/limk within the content:

function initializeLifeHacker() {
    url = 'http://feeds.gawker.com/lifehacker/full';
    var feed = new google.feeds.Feed(url);
    feed.setNumEntries(25);
    feed.load(function (result) {
        var postlist = result.feed.entries;
        var html = '';
        $.each(postlist, function (idx, data) {
            html += '<div data-role="collapsible" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" class="entry">';           
            html += '<h2>' + data.title + '</h2>';
            html += '<p class="author"> Author: ' + data.author + '</p><p class="description">' + data.contentSnippet + '</p>';
            html += '<a href="#" class="ui-btn" onclick="window.open(\'' + data.link + '\', \'_blank\', \'location=yes\')">Open Article...</a>';
            html += '</div>';
        });

        $("#lifeHackerFeedlist").append(html).find("div[data-role=collapsible]").collapsible();
    });
}

Working DEMO

answered May 28 '15 at 13:57

ezanker

24,628
1
20
35

Great! Thank you. Wow can't believe I didn't figure that out! too many hours of coding I guess. Why is the div inset box or the button in the collapse not picking up my rounded corners from my jquery mobile theme I added data-theme="a" to the Div – kami nelson May 28 '15 at 20:34
@kaminelson, for jQM 1.4.x try: $("#lifeHackerFeedlist").append(html).collapsibleset("refresh").enhanceWithin(); (updated fiddle: http://jsfiddle.net/ezanker/emdypzqy/1/) if you are using an earlier jQM, try trigger("create") instead of enhanceWithin(). – ezanker May 28 '15 at 21:03
That worked! Thank you! Another hopefully last question, how can I find out what data is being pulling in from the feeds? I want to use a description instead of the content.snippet but description is undefined for this feed so I want to see the XML labels to select the correct one. – kami nelson May 28 '15 at 21:14
@kaminelson, add a console.log(postlist); and look in Chrome's JavaScript Console. The JSON feed has author, categories, content, contentSnippet, link, publishedDate, title. I don't see any description type of field included... – ezanker May 28 '15 at 21:50
@kaminelson, according to the google feed api documentation, content corresponds to description, so you can use data.content instead of data.contentSnippet. https://developers.google.com/feed/v1/devguide#resultJson – ezanker May 28 '15 at 22:39
@kaminelson, here is an updated fiddle using content/description but removing the extra line braks, images, and links: http://jsfiddle.net/ezanker/emdypzqy/2/ – ezanker May 28 '15 at 22:59
Where did you put in the console.log(postlist); when I put it in all I get is object object object... – kami nelson May 28 '15 at 23:22
@kaminelson: http://jsfiddle.net/ezanker/emdypzqy/3/ you can expand the object in the console – ezanker May 28 '15 at 23:27
You are awesome. Since the first image is way to big is there a way to not show that image? – kami nelson May 28 '15 at 23:41

collapsible-set in phonegap using jquery won't work properly

1 Answers1