Advanced Search

jQuery Mobile on the PlayBook WebWorks SDK

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>Landmark Finder</title>
  7. <link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
  8. <script src="jquery-1.5.min.js"></script>
  9. <script src="jquery.mobile-1.0a3.min.js"></script>
  10. <script type="application/javascript">
  11. $(document).ready(function(){
  12. 	// Add a click listener on the button to get the location data
  13. 	$('#getLocation').click(function(){
  14. 		if (navigator.geolocation) {
  15. 			navigator.geolocation.getCurrentPosition(onSuccess, onError);
  16. 		} else {
  17. 			// If location is not supported on this platform, disable it
  18. 			$('#getLocation').value = "Geolocation not supported";
  19. 			$('#getLocation').unbind('click');
  20. 		}		
  21. 	});
  22. });
  23.  
  24. // create the geonames namespace for calling the API
  25. var geonames = {};
  26. 	geonames.baseURL = "http://ws.geonames.org/";
  27. 	geonames.method = "findNearbyWikipediaJSON";
  28. 	geonames.search = function(lat,lng){
  29.  
  30. 	// get the data in JSON format from Geonames
  31. 	$.getJSON(geonames.baseURL + geonames.method + '?formatted=true&lat=' + lat + 
  32. '&lng=' + lng + '&style=full&radius=10&maxRows=25&username=ryanstewart',function(data){
  33.  
  34. 		// Loop through each item in the result and add it to the DOM
  35. 		$.each(data.geonames, function() {
  36. 			$('<li></li>')
  37. 			.hide()
  38. 			.append('<a href="http://'+this.wikipediaUrl+'">
  39. <h2>'+this.title+'</h2></a><br /><p>'+ this.summary + '</p><span class="ui-li-aside">
  40. <h5>'+this.distance+' (km)</h5></span>')
  41. 			.appendTo('#wikiList')
  42. 			.show();
  43. 		});
  44. 		// Once the data is added to the DOM, make the transition
  45. 		$.mobile.changePage('#dashboard',"slide",false,true);
  46.  
  47. 		// refresh the list to make sure the theme applies properly
  48. 		$('#wikiList').listview('refresh');
  49.  
  50.  
  51. 	});
  52. };
  53.  
  54. // Success function for Geolocation call
  55. function onSuccess(position)
  56. {
  57. 	alert('getting position');
  58. 	geonames.search(position.coords.latitude,position.coords.longitude);
  59. }
  60.  
  61. // Error function for Geolocation call
  62. function onError(msg)
  63. {
  64. 	geonames.search(47.667622,-122.384946);
  65. }
  66.  
  67. </script>
  68. </head>
  69.  
  70. <body>
  71. <div data-role="page">
  72. 	<div data-role="header">
  73.     	<h1>Find Location</h1>
  74. 	</div>
  75.     <div data-role="content">
  76.         <p>This application will use the <a href="http://geonames.org">Geonames</a> API and 
  77. your location to bring back a list of Wikipedia articles about features that are near you. 
  78. To get started, click the button below and allow the application to read your geolocation 
  79. information.</p>
  80.         <input type="button" value="Get My Location" id="getLocation" />
  81.     </div>
  82.     <div data-role="footer">
  83.     	<h4>By <a href="http://blog.digitalbackcountry.com">Ryan Stewart</a></h4>
  84.     </div>
  85. </div>
  86. <div data-role="page" id="dashboard">
  87. 	<div data-role="header">
  88.     	<h1>Data List</h1>
  89.     </div>
  90.     <div data-role="content">
  91.     	<ul id="wikiList" data-role="listview" data-theme="c">
  92.         </ul>
  93.     </div>
  94.     <div data-role="footer">
  95.     	<h4>By <a href="http://blog.digitalbackcountry.com">Ryan Stewart</a></h4>
  96.     </div>
  97. </div>
  98. </body>
  99. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.