listview('refresh') is broken in alpha 3

icecloud commented 13 years ago

I used a template API from http://www.ivorycity.com/blog/jquery-template-plugin/ and runtime add a <li> to <ul>, then I invoke listview('refresh'). but I didn't see the list item is rendered properly. This was working in alpha 2. Could you take a look whether it is a regression?

here is the full html.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script type="text/javascript" src="lib/templates-1.1.1/templates.js"></script>
<script type="text/javascript">

$('#main-page').live('pageshow', function() {
var couponInfo = {
store_logo_url : "image/chocolate.jpg",
store_name : "Costco",
my_title : "My title"
};

$("#my-template .my-ui-creditcoupon-list").render(couponInfo,
{preserve_template:true}).appendTo("#main-list");

$("#main-list").listview('refresh');

});

</script>
</head>
<body>
<div id="main-page" data-role="page">

<div data-role="header" data-theme="a">
<h1>Thumbnails</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div>

<div data-role="content">
<ul id="main-list" data-role="listview">
</ul>
</div>
</div>
<div id="my-template">
<ul id="my-template-coupon-list">

<li class="my-ui-creditcoupon-list">
<img src="{store_logo_url}"/>
<h3><a href="#" data-transition="slide">{store_name}</a></h3>
<p>{my_title}</p>
</li>
</ul>
</div>

</body>
</html>

toddparker commented 13 years ago

This code isn't readable. Can you provide a better example?

Abc1234 commented 13 years ago

I've the same issue. This is working fine under alpha 2:

$("#eventListTemplate").tmpl(target).appendTo("#eventList"); $("#eventList").listview('refresh');

But on alpha 3 I'm getting this error: uncaught exception: cannot call methods on listview prior to initialization; attempted to call method 'refresh'

scottjehl commented 13 years ago

Hmm... your syntax looks fine as far as the listview portion goes. Is there perhaps more than one #eventList element in the DOM, such as in another page that hasn't been enhanced yet? In A3, we're not enhancing every page in the DOM on load, only when you navigate to them, so that could be related to this. Try scoping your updates to the page that triggered the pagecreate event.

I'm not seeing any issues in particular with appending an item and refreshing the listview in our docs. For example, if you open up http://jquerymobile.com/demos/1.0a3/ and log out something like the following from the console, it seems to work fine:

$(".ui-listview")
.append('<li><h3><a href="index.html">Stephen Weber</a></h3><p><strong>You\'ve been invited to a meeting at Filament Group in Boston, MA</strong></p><p>Hey Stephen, if you\'re available at 10am tomorrow, we\'ve got a meeting with the jQuery team.</p><p class="ui-li-aside"><strong>6:24</strong>PM</p></li>')
.listview("refresh");

Closing for now, but please comment if you identify the issue.

Abc1234 commented 13 years ago

yeah the #eventList is really on another page. If you put the list on the main page or load the function while I'm on the page the list is on the error doesn't occur...

Thanks a lot for your fast help

icecloud commented 13 years ago

Sorry about that. I have updated the bug with the correct formatting. please take a look.

Thanks.

jquery-archive / jquery-mobile

listview('refresh') is broken in alpha 3 #971