jQuery Mobile Dynamic Listview Example

by richardwo

HTML

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<a href="#" data-role="button" id="european">European</a>
<a href="#" data-role="button" id="japanese">Japanese</a>

<ul id="template" style="display:none">
  <li><a href="#" data-val="acura">Acura</a></li>
  <li><a href="#" data-val="audi">Audi</a></li>
  <li><a href="#" data-val="bmw">BMW</a></li>
  <li><a href="#" data-val="lexus">Lexus</a></li>
  <li><a href="#" data-val="nissan">Nissan</a></li>
  <li><a href="#" data-val="toyota">Toyota</a></li>
  <li><a href="#" data-val="volkswagen">Volkswagen</a></li>
</ul>

<ul data-role="listview" id="carslist">
  <li><a href="#" data-val="acura">Acura</a></li>
  <li><a href="#" data-val="audi">Audi</a></li>
  <li><a href="#" data-val="bmw">BMW</a></li>
  <li><a href="#" data-val="lexus">Lexus</a></li>
  <li><a href="#" data-val="nissan">Nissan</a></li>
  <li><a href="#" data-val="toyota">Toyota</a></li>
  <li><a href="#" data-val="volkswagen">Volkswagen</a></li>
</ul>

JavaScript

//this function empties the list and rebuilds it
function buildList(cars) {
    $('#carslist').empty();
    jQuery.each(cars, function(k, v) {
        $('#template a[data-val="' + v + '"]').parent().clone(true).appendTo('#carslist');
        //by cloning the elements with 'true' parameter you keep any events associated with them
    });
    $('#carslist').listview('refresh');
}

$(document).bind('pageinit', function() {
    $('#template a').click(function() {
        //do something when a listview element is selected
        console.log($(this).data('val'));
    });

    $('#european').click(function() {
        buildList(['audi', 'bmw', 'volkswagen']);
    });

    $('#japanese').click(function() {
        buildList(['acura', 'lexus', 'nissan', 'toyota']);
    });

    //build the initial list with all the options available
    buildList(['acura', 'audi', 'bmw', 'lexus', 'nissan', 'toyota', 'volkswagen']);
});