Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to display rss feed results in a jquery list
    primarykey
    data
    text
    <p>I would like to display my blog post results as a jQuery mobile lists. For now all the titles, date, author and snippets are appearing line by line and also I would like to be able to click on each posts and view the contents directly as a mobile format. This is my code:</p> <pre><code>$(document).ready((function(){ url = 'http://hopexxx.com/category/daily-devotion/feed/'; $.ajax({ type: "GET", url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&amp;num=1000&amp;callback=?&amp;q=' + encodeURIComponent(url), dataType: 'json', error: function(){ alert('Unable to load feed, Incorrect path or invalid feed'); }, success: function(xml){ postlist = xml.responseData.feed.entries; //console.log(postlist); var data='&lt;ul data-role="listview" data-filter="true"&gt;'; $.each(postlist, function(idx, data) { $('#postlist').append('&lt;div class="entry"&gt;' + data.title + '&lt;/div&gt;'); $('#postlist').append('&lt;div class="entry"&gt;' + data.author + '&lt;/div&gt;'); $('#postlist').append('&lt;div class="entry"&gt;' + data.publishedDate + '&lt;/div&gt;'); $('#postlist').append('&lt;div class="entry"&gt;' + data.contentSnippet + '&lt;/div&gt;'); console.log(data); '&lt;/ul&gt;'; }); } }); })); </code></pre> <p>html code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;script src="css/style.css"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt; &lt;script src="js/script.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="blog" data-role="page"&gt; &lt;div data-role="header" class="sys_hd" data-position="fixed" data-id="sys_header" &gt; &lt;h1&gt;Sysads Posts&lt;/h1&gt; &lt;/div&gt;&lt;!-- header --&gt; &lt;div data-theme="c" data-role="content" id="postlist"&gt; &lt;/div&gt;&lt;!-- content --&gt; &lt;div data-role="footer" data-position="fixed" data-id="sys_footer" &gt; &lt;div data-role="navbar" &gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#blog" class="sys_ft"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#blog" class="sys_ft"&gt;Disclaimer&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- navbar --&gt; &lt;/div&gt;&lt;!-- footer --&gt; &lt;/div&gt;&lt;!-- page --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload