This is my html:
<ul data-role="list-view" data-filter="true"></ul>
My JS loads the ul with data and then I call listview().
$('#page').live('pagebeforecreate', function(){
// My Ajax code
});
$('#page').live("pageinit", function(){
$('#page ul').listview();
});
That works except the search bar at the top doesn't appear. What am I missing?
You have
data-role="list-view"
When the right way is
data-role="listview"
that is why the search bar at the top doesn't appear.
I think you need to use $('#page ul').listview('refresh'); instead of just $('#page ul').listview();. You need to refresh a jQuery-Mobile component when you update it via Ajax.
You'd have to call:
$('#page ul').listview('create');
after you are done populating your list with jscript.
To refresh it's content (only after it's creation), you could call:
$('#page ul').listview('refresh');
Instead of calling $('#page').live("pageinit", function(){
$('#page ul').listview();
});
Do the following:
$('#page').live("pageinit", function(){
init();
});
<ul id="mylist" data-role="listview" data-theme="b" data-filter="true" >
</ul>
function init()
{
type: "GET",
$.ajax({
url: "BirthdayInvitations.xml",
dataType: "xml",
success: function ParseXml(xml)
{
$(xml).find("event").each(function() {
$("#mylist").append('<li><a href="' + "#" + '">' +this.textContent + '</a></li>');
});
$("#mylist").listview('refresh');
}});
}
This is working i tried it out and i am using in my application.
