Richard Willis-Owen

This example was written for jQuery Mobile v1.2

A dynamic listview is a widget whose content depends on a previous user interaction with the page. I struggled to find some simple instructions on how to dynamically alter the contents of a listview, the jQuery Mobile documentation for listviews only covers adding items.

The trick I do is to empty and rebuild the list each time the content needs to change.
I could do this completely with JavaScript but instead I store a hidden DOM element because it is easier to get the markup right, then use this like a template to create the list from.

Lets start with some example HTML:

  
Acura
  
Audi
  
BMW
  
Lexus
  
Nissan
  
Toyota
  
Volkswagen

I’ve removed the href destination and added a data attribute to each of the list elements – this would be used if you wanted to do further scripting when one of these was clicked as it’s an easy way of getting the value.

Now for the JavaScript/jQuery. The buildList function does the work, receiving an array with names of the template elements that I want to appear in the list. Remember with jQuery Mobile you don’t use the standard jQuery document ready event – instead bind to the pageinit event. All I’m doing in the pageinit code block is attaching events to the buttons on the page which change the contents of the list, and adding an event when a list item is clicked to show that it is working.

//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']);
});

It looks like this:
You can find a working dynamic listview example in jsFiddle.

The jQuery keyup event fires twice in Firefox when Auto Form Fill is enabled, so if you want to make use of this event you either need to switch off autocompletion or add some kind of counter so that the second event is ignored.

I’ve confirmed this with versions 1.7.2 and 1.8.2.

Code to reproduce:

$('#no-auto').keyup(function(e) {console.log('no-auto input detected')});
$('#with-auto').keyup(function(e) {console.log('with-auto input detected')});

This assumes you are running Firebug – if you type a few characters of your email address in the first field, you’ll see 2 lines in the Firebug console for each keypress. Using the second input field you’ll see only 1 line in the console.

You can see an example of the jQuery keyup event firing twice with jsFiddle.

With jQuery it is very easy to change the value of a form element, here’s a quick example that changes the text for a form element with id=’input1′

$('#input1').val('this is the new value');

On the page you will see your input change as requested. If you look at the value with jQuery there are no surprises.

console.log($(#input1).val());
//will output 'this is a new value'

However you may be surprised that it hasn’t been changed if you try to look at it with jQuery in a different way. Assuming that input1 is contained in a div with id ‘div1’.

console.log($('#div1').html());

You will see this

The DOM doesn’t look like it has been updated. This certainly wasn’t the behaviour I expected from this so it took a lot of digging to find out what was going on.

It turns out that the HTML value attribute isn’t necessarily the value that is displayed on the page, instead it is known as the default value – used when the page is first loaded or if the form is reset.

The solution. If you want to update the value that appears on the page and the value that’s retrievable by the .html() method is this:

$('#input1').val('this is the new value');
//before jQuery 1.6
$('#input1').attr('defaultValue', 'this is the new value');
//after jQuery 1.5.2
$('#input1').attr('value', 'this is the new value');

Set the ‘defaultValue’ or ‘value’ attribute depending on your version of jQuery as well as using the .val() method. You’ll find that getting the html with jQuery will now show the correct value.

Follow @rwilliso