Search code examples
jquerycordovamobilerssjfeed

Styling RSS feeds using jquery mobile

I am writing an iPhone application with PhoneGap. I'm trying to parse a Facebook RSS Feed and use jFeed to do so. I get the feed, and I can display it to the user. However, when it comes to styling the RSS Feed to make it look good (using JQuery Mobile CSS attributes) it doesn't take into account the attributes (ul and li markers). Is there a way to style the RSS Feed using JQuery Mobile? Here is the code I am using (index.html) : 

<!DOCTYPE html> 
<html> 
<head> 
<title>BDA Audencia</title> 
<meta charset="utf-8" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, 
target-densitydpi=device-dpi" />
<!-- JQUERY CSS -->
      <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

<!-- CORDOVA - PHONE GAP -->
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" href="style/site.css">

<!-- RSS FEED -->
<script type="text/javascript" src="js/jquery.jfeed.pack.js"></script>
      <script>

          jQuery(function() {

                 jQuery.getFeed({
                                url: 'http://www.facebook.com/feeds/page.php?id=360453900718092&format=atom10',
                                success: function(feed) {


                                var html = '';

                                for(var i = 0; i < feed.items.length && i < 5; i++) {

                                var item = feed.items[i];

                                html += '<li data-role="list-divider"><span style=" right: 45px;position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.95em;; right: 10px;">'
                                + item.updated
                                + '</span></li>'
                                + '<li>'
                                + item.description
                                + '</li>';


                                }
                                html += html + '';
                                jQuery('#result').append(html);
                                }    
                                });
                 });

        </script>
    <!-- Changing the position of this code will not make $.mobile.defaultPageTransition work. DO NOT CHANGE IT -->
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head> 
<body>


<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h1>Test RSS</h1>
</div>

<div data-role="content">   
        <div class="content-primary">
            <ul data-role="listview" data-theme="d" data-divider-theme="d">
            <div id="result"></div>
                </ul>
                </div>
</div>

<div data-role="footer" data-theme="d">
</div>
</div><!-- /page one -->
Solution

  • div direct inside ul is incorrect HTML structure.

    <ul data-role="listview" data-theme="d" data-divider-theme="d">
  <div id="result"></div>
</ul>

    Please change it as below

    <ul id="result" data-role="listview" data-theme="d" data-divider-theme="d">
</ul>

    Then after jQuery('#result').append(html); this code, add code to refresh the listview. Because the jquery mobile marker was generated when pagecreate. In your case, you are dynamic getting data and build the listview. So, you have to refresh the listview by uisng .listview( "refresh" )

    Revised code should as below:

    $('#result').append(html);
$('#result').listview("refresh");

    More about listview in jquery mobile.
    Reference : http://jquerymobile.com/demos/1.2.0/docs/lists/lists-methods.html