Skip to content

Instantly share code, notes, and snippets.

@donwalter
Created April 29, 2012 17:13
Show Gist options
  • Save donwalter/2552018 to your computer and use it in GitHub Desktop.
Save donwalter/2552018 to your computer and use it in GitHub Desktop.
jQuery Mobile Cookbook: C5R9 - Dynamic Data List - Array
<div data-role="page">
<div data-role="header">
<h1>Dynamic List - Array</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="myList"></ul>
</div>
</div>
// Array of items to be injected into the list
var arrItems = [
"Ben Folds Five",
"Cake",
"Gomez",
"Guster"
];
$( document ).ready( function() {
// Set your list element into a variable
var $myList = $( "#myList" );
var newItems = [];
// Loop through your results and append a new <li> onto your list for each result
$.each( arrItems, function( index, value ) {
newItems.push( "<li><a href='index.html?id=" + index + "'>" + value + "</a></li>" );
});
// Append the new items to your list
$myList.append( newItems.join( "" ) );
// Refresh the listview to apply jQuery Mobile formatting to new items
$myList.listview( "refresh" );
});
name: jQuery Mobile Cookbook C5R9 - Dynamic Data List - Array
description: Example of populating a list using an array in jQuery Mobile
authors:
- Don Walter
resources:
- http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js
- http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css
normalize_css: no
@donwalter
Copy link
Author

@donwalter
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment