Skip to content

Instantly share code, notes, and snippets.

@donwalter
Created April 29, 2012 17:17
Show Gist options
  • Save donwalter/2552031 to your computer and use it in GitHub Desktop.
Save donwalter/2552031 to your computer and use it in GitHub Desktop.
jQuery Mobile Cookbook: C5R9 - Dynamic Data List - AJAX
<div data-role="page">
<div data-role="header">
<h1>Dynamic List - AJAX</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="myList"></ul>
</div>
</div>
// The data that will be returned to your AJAX call
var data = {
json: $.toJSON([
"Ben Folds Five",
"Cake",
"Gomez",
"Guster"
])
};
$( document ).ready( function() {
$.ajax({
url: "/echo/json/",
type: "POST",
dataType: "json",
data: data,
success: function(data) {
// 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( data, 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 - AJAX
description: Example of populating a list using AJAX in jQuery Mobile
authors:
- Don Walter
resources:
- http://jquery-json.googlecode.com/files/jquery.json-2.3.js
- 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

@drkrish
Copy link

drkrish commented Jul 29, 2018

it does not work in fiddle.

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