Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to programmatically create listview in JQM

I have an array from ajax and i need to create jQuery Mobile Listview. I don't found a method for this, so is it possible?

like image 974
user1692333 Avatar asked Feb 18 '23 00:02

user1692333


1 Answers

Here's a working example: http://jsfiddle.net/Gajotres/SS7vJ/

And another example with an array: http://jsfiddle.net/Gajotres/yHHWQ/

$(document).on('pagebeforeshow', '#index', function(){       
    $('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]');
    $('<li>').append('<a href="#">Audi</a>').appendTo('#test-listview');
    $('<li>').append('<a href="#">Mercedes</a>').appendTo('#test-listview');
    $('<li>').append('<a href="#">Opel</a>').appendTo('#test-listview');
    $('#test-listview').listview().listview('refresh');
});

Also don't forget to call .listview( twice, first without refresh parameter, and second time with a refresh parameter. Without it you will receive this error:

cannot call methods on listview prior to initialization

If you want to find out more about how jQuery mobile handles dynamically added content and its markup take a look at this ARTICLE, to be transparent it is my personal blog, or find it HERE.

like image 173
Gajotres Avatar answered Feb 27 '23 11:02

Gajotres