Created
April 29, 2012 17:17
-
-
Save donwalter/2552031 to your computer and use it in GitHub Desktop.
jQuery Mobile Cookbook: C5R9 - Dynamic Data List - AJAX
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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" ); | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
http://jsfiddle.net/gh/gist/jquery/1.8/2552031/