CODEWITHSUNDEEP
jqueryjquery-mobile
user964888
user964888

Reputation: 11

How to add a list view dynamically using JqueryMobile?

I am developing an application and im using jQuery mobile for the UI. Did any body know how to implement list view dynamically using js. The static code snippet is below:

<ul data-role="listview" data-theme="g"> 
      <li><a href="acura.html">Acura</a></li> 
      <li><a href="audi.html">Audi</a></li> 
      <li><a href="bmw.html">BMW</a></li> 
</ul>

Upvotes: 0

Views: 3005

Answers (4)

stay_hungry
stay_hungry

Reputation: 1448

you can do this way:

<ul data-role="listview" data-theme="g" id="lstSample">

</ul>

In js

    for(var i=0;i<urs_source.length;i++){
        $("#lstSample").append($("<li><a href='" + urs_source[i].link + "'>" + urs_source[i].text  + "</a></li>"));
}

$('#lstSample').listview('refresh');

Finally you need to refresh your list view.

Upvotes: 1

Nirmal Patel
Nirmal Patel

Reputation: 5168

After adding elements to the list using JS; you need to invoke refresh on it to let JQM enhance it.

$('.selector').listview('refresh');

Upvotes: 0

JohnMalkowich
JohnMalkowich

Reputation: 298

So you wanna add li elements to your ui element?

if so you can do something like this:

<ul data-role="listview" data-theme="g" id="mylist"> 
      <li><a href="acura.html">Acura</a></li> 
      <li><a href="audi.html">Audi</a></li> 
      <li><a href="bmw.html">BMW</a></li> 
</ul>

function addlist(link, text) {
$("#mylist").append("<li><a href='" + link + "'>" + text + "</a></li>");
}

And then you can add list items calling the function like this:

addlist("ford.html", "Ford");

Else i dont get your question :-(

Upvotes: 0

Tarik
Tarik

Reputation: 81831

<ul data-role="listview" data-theme="g" id="mylist"> 
      <li><a href="acura.html">Acura</a></li> 
      <li><a href="audi.html">Audi</a></li> 
      <li><a href="bmw.html">BMW</a></li> 
</ul>


$("#mylist").css("display","none");
$("#mylist").css({display:"none", backgroundColor:"red"});

This should help.

Upvotes: 0

Related Questions