Reputation: 1798
I'm developing an app for Android using Phonegap and JQuery. One of the tasks is to dynamically add some content to the list. In the first time, when I add a first element and call .listview() everything seems to be fine, but when I add some content, its styles doesn't work properly, and listview('refresh') and other commands don't help at all. I'm using jquery mobile 1.0a1. Here is the code for two buttons:
$("#nextDay").click(function(){
$("#SheduleList").append('<li><a href="#"><h3 class="ui-li-heading">ololo1</h3></a></li>');
$('#SheduleList').listview('refresh');
});
$("#prevDay").click(function(){
$("#SheduleList").append('<li><a href="#"><h3 class="ui-li-heading">ololo</h3></a></li>');
$("#SheduleList").listview();
});
The first Button is "prevButton". Here is some HTML:
<body onload="init();">
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Расписание группы 04-322</h1>
<h1 id=hday>День недели</h1>
</div>
<div data-role="content" data-theme="b">
<ul id="SheduleList">
</ul>
<button id="nextDay">Следующий день</button>
<button id="prevDay">Предыдущий день</button>
</div>
</div>
</body>
Upvotes: 0
Views: 941
Reputation: 8071
Add data-role="listview"
in your <ul>
in HTML.
<ul id="SheduleList" data-role="listview" data-inset="true"></ul>
Upvotes: 0
Reputation: 44
You are not alone.
This seems to work the best for me:
refresh = function (selector)
{
try
{
//this may throw an exception:
// call methods on listview prior to initialization; attempted to call method 'refresh'
$(selector).listview('refresh');
}
catch (e)
{
}
}
refresh("#SheduleList");
Upvotes: 1