CODEWITHSUNDEEP
jquery
JavaGeek
JavaGeek

Reputation: 1539

listview not working in jQuery mobile

I'm trying to fetch the feeds dynamically from some source and then i wanted to display each of the link in form of list in jQuery mobile . I'm able to fetch the feeds but they are displaying normally even tough i had kept data-role="listview" and unorderedlist.listview('refresh').

enter image description here Below is the code

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<style type="text/css">
.nstyle
{
data-role:listview;
list-style:none;
}

</style>

 <script>
  $(document).ready(function(){

      $("#toi").rssfeed("http://timesofindia.feedsportal.com/c/33039/f/533974/index.rss",{limit:5,date:false,header:false,content:false});

  });
  </script>


<script type="text/javascript">

(function($){



    var current=null;
    $.fn.rssfeed=function(url,options){
        var defaults={limit:10,header:true,titletag:'h4',date:true,content:true,snippet:true,showerror:true,errormsg:'',key:null};
        var options=$.extend(defaults,options);
        return this.each(function(i,e){var $e=$(e);
        if(!$e.hasClass('rssFeed'))$e.addClass('rssFeed');
        if(url==null)return false;
        var api="http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q="+url;
        if(options.limit!=null)
            api+="&num="+options.limit;
        if(options.key!=null)api+="&key="+options.key;
        $.getJSON(api,function(data)
                {if(data.responseStatus==200)
        {_callback(e,data.responseData.feed,options);
        }
        else{
            if(options.showerror)
if(options.errormsg!='')
{
    var msg=options.errormsg;
    }else
    {
        var msg=data.responseDetails;
        };
        $(e).html('<div"><p>'+msg+'</p></div>');};});});};

        var _callback=function(e,feeds,options){if(!feeds){return false;
        }
var html='';
var row='odd';
if(options.header)
html+='<div>'+'<a href="'+feeds.link+'" title="'+feeds.description+'">'+feeds.title+'</a>'+'</div>';
html+='<div>'+'<ul id="tst">';
for(var i=0;i<feeds.entries.length;i++)
{var entry=feeds.entries[i];
var entryDate=new Date(entry.publishedDate);
var pubDate=entryDate.toLocaleDateString()+' '+entryDate.toLocaleTimeString();
html+='<li class="rssRow '+row+'">'+'<'+options.titletag+'><a  href="'+entry.link+'" title="View this feed at '+feeds.title+'">'+entry.title+'</a></'+options.titletag+'>'
if(options.date)html+='<div>'+pubDate+'</div>'
if(options.content)
{if(options.snippet&&entry.contentSnippet!=''){var content=entry.contentSnippet;
}else{var content=entry.content;
}

html+='<p>'+content+'</p>'}
html+='</li>';if(row=='odd'){row='even';}else{row='odd';}}
html+='</ul>'+'</div>'

$(e).html(html);
$("#tst").addClass('nstyle');
$("#tst").listview('refresh');
        };

        })(jQuery);
</script>





</head>
<body>
<div data-role="page" id="home" data-theme="e">
 <div data-role="header" >
  <h1>Times Of India</h1>
 </div>
 <div data-role="content" id="toi">
 content here
 </div>
 <div data-role="footer">
  <h4>Top News</h4>
 </div>
</div>


</body>
</html>

Upvotes: 2

Views: 3934

Answers (2)

Fannon
Fannon

Reputation: 423

I've got a similar problem:

I call .trigger("create") and jQM will apply stlye to most elements, but not listviews.

If I call .page(); on my list, it doesn't style but disapears.

Using jQuery 1.7.2 and jQM 1.1.1

Thanks, Simon

Upvotes: 0

Jivings
Jivings

Reputation: 23262

Change:

$(document).ready(function(){
    $("#toi").rssfeed("http://timesofindia.feedsportal.com/c/33039/f/533974/index.rss",{limit:5,date:false,header:false,content:false});

});

To:

 $(document).ready(function(){
    $('#home').live('pagebeforecreate', function(){
        $("#toi").rssfeed("http://timesofindia.feedsportal.com/c/33039/f/533974/index.rss",{limit:5,date:false,header:false,content:false});
    });
});

UPDATE:

Is this what you're after? http://jsfiddle.net/8EGGZ/25/

In the end I replaced listview.refresh() with $("#toi").page(); in your callback function.

UPDATE 2:

Fixed the jquery-mobile issues - http://jsfiddle.net/8EGGZ/27/

Upvotes: 1

Related Questions