Search jQuery

jQuery Forum

jQuery Mobile

jerry0870

render listview dynamic

in jQuery Mobile • 11 years ago

Hi,

I have a problem to render a listview.

Everything is working fine(also the search bar is filtering), but after rendering with $("#t ul").listview();

it writes me also undefined to page..

is this the correct way to render a dynamic listview?

I hope you can help me..

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="jquery.mobile-1.0.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script src="jquery.mobile-1.0.min.js"></script>
<script>
function test(){
var a;
a+='<ul data-role="listview" data-filter="true">';
a+='<li><a href="#" onclick="alert();">Acura</a></li>';
a+='<li><a href="#">Audi</a></li>';
a+='</ul>';
$("#t").html(a);
$("#t ul").listview();
}
</script>
</head>
<body>
<div id='t'></div>
<a href='#' onclick='test();'>run</a>
</body>
</html>

Replies(11)

watusiware

The div #t doesn't have a listview. the <ul> you inserted does.

You need to call .listview('refresh') (not .listview()) on a selector for the <ul> element, not the div that contains it.

Further, in this case, since you have inserted the <ul> dynamically, I think you will also first have to call .trigger('create') on the parent. (i.e. the div.)

Finally, don't use IDs, use classes, and qualify your selectors to limit to the active page. (Or specific page if altering a different page.) IDs are next to worthless in JQM because it loads multiple pages into the same document, and it's unpredictable what will happen if you duplicate an ID.

This is probably the #1 mistake made by newbies. They need a big red screen that comes up on the first page of the docs, and you should have to sign in blood that you understand that it's a bad idea to use IDs... ;)

Marc Ober..

Re: render listview dynamic

11 years ago

I have the same probleme but i don't put the <ul> dynamically...

EDIT

I found the solution, i just initialise the variable like this var codeHTML=""; and not like that var codeHTML=;

So initialise a="";

miloshke

Re: render listview dynamic

11 years ago

Is there a way to dinamicly add search filter to listview?

I'm making some app with different lists, I load data from JSON and display it, so I'm injecting listviews dinamicly with out search filter, by default.

What I want is to add search button and display search filter on click.

I tried modifying listview by

.attr('data-filter',true)

and

.prop('data-filter',true),

and triggering create on parent div, and refreshing listview after modifying, but noting happens.

Any ideas?

arschmitz

Re: render listview dynamic

11 years ago

are you injecting the ul dynamically or just the items within it ?

miloshke

Re: render listview dynamic

11 years ago

everything is injected dynamically.

ul and li within.

even wrapper for ul is injected in the content div

arschmitz

Re: render listview dynamic

11 years ago

add data-filter="true" to the ul before you inject it and call create

miloshke

Re: render listview dynamic

11 years ago

i know i can do that, but that is not what i had in mind.

i want search filter to show on user click, not to be visible all the time

watusiware

Re: render listview dynamic

11 years ago

Why not add data-filter="true" but use CSS to initially hide the search input element? You can then make it visible or invisible programatically as you wish.

miloshke