jQuery Mobile on the PlayBook WebWorks SDK - HTML Snipplr Social Repository

Revision: 43559

at March 26, 2011 03:55 by ryanstewart

Updated Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Landmark Finder</title>
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
<script src="jquery-1.5.min.js"></script>
<script src="jquery.mobile-1.0a3.min.js"></script>
<script type="application/javascript">
$(document).ready(function(){
	// Add a click listener on the button to get the location data
	$('#getLocation').click(function(){
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(onSuccess, onError);
		} else {
			// If location is not supported on this platform, disable it
			$('#getLocation').value = "Geolocation not supported";
			$('#getLocation').unbind('click');
		}		
	});
});

// create the geonames namespace for calling the API
var geonames = {};
	geonames.baseURL = "http://ws.geonames.org/";
	geonames.method = "findNearbyWikipediaJSON";
	geonames.search = function(lat,lng){
	
	// get the data in JSON format from Geonames
	$.getJSON(geonames.baseURL + geonames.method + '?formatted=true&lat=' + lat + 
'&lng=' + lng + '&style=full&radius=10&maxRows=25&username=ryanstewart',function(data){

		// Loop through each item in the result and add it to the DOM
		$.each(data.geonames, function() {
			$('<li></li>')
			.hide()
			.append('<a href="http://'+this.wikipediaUrl+'">
<h2>'+this.title+'</h2></a><br /><p>'+ this.summary + '</p><span class="ui-li-aside">
<h5>'+this.distance+' (km)</h5></span>')
			.appendTo('#wikiList')
			.show();
		});
		// Once the data is added to the DOM, make the transition
		$.mobile.changePage('#dashboard',"slide",false,true);
	
		// refresh the list to make sure the theme applies properly
		$('#wikiList').listview('refresh');
		
		
	});
};

// Success function for Geolocation call
function onSuccess(position)
{
	alert('getting position');
	geonames.search(position.coords.latitude,position.coords.longitude);
}

// Error function for Geolocation call
function onError(msg)
{
	geonames.search(47.667622,-122.384946);
}

</script>
</head>

<body>
<div data-role="page">
	<div data-role="header">
    	<h1>Find Location</h1>
	</div>
    <div data-role="content">
        <p>This application will use the <a href="http://geonames.org">Geonames</a> API and 
your location to bring back a list of Wikipedia articles about features that are near you. 
To get started, click the button below and allow the application to read your geolocation 
information.</p>
        <input type="button" value="Get My Location" id="getLocation" />
    </div>
    <div data-role="footer">
    	<h4>By <a href="http://blog.digitalbackcountry.com">Ryan Stewart</a></h4>
    </div>
</div>
<div data-role="page" id="dashboard">
	<div data-role="header">
    	<h1>Data List</h1>
    </div>
    <div data-role="content">
    	<ul id="wikiList" data-role="listview" data-theme="c">
        </ul>
    </div>
    <div data-role="footer">
    	<h4>By <a href="http://blog.digitalbackcountry.com">Ryan Stewart</a></h4>
    </div>
</div>
</body>
</html>

Revision: 43558

at March 26, 2011 03:43 by ryanstewart

Initial Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Landmark Finder</title>
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
<script src="jquery-1.5.min.js"></script>
<script src="jquery.mobile-1.0a3.min.js"></script>
<script type="application/javascript">
$(document).ready(function(){
	// Add a click listener on the button to get the location data
	$('#getLocation').click(function(){
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(onSuccess, onError);
		} else {
			// If location is not supported on this platform, disable it
			$('#getLocation').value = "Geolocation not supported";
			$('#getLocation').unbind('click');
		}		
	});
});

// create the geonames namespace for calling the API
var geonames = {};
	geonames.baseURL = "http://ws.geonames.org/";
	geonames.method = "findNearbyWikipediaJSON";
	geonames.search = function(lat,lng){
	
	// get the data in JSON format from Geonames
	$.getJSON(geonames.baseURL + geonames.method + '?formatted=true&lat=' + lat + '&lng=' + lng + '&style=full&radius=10&maxRows=25&username=ryanstewart',function(data){
		// Loop through each item in the result and add it to the DOM
		$.each(data.geonames, function() {
			$('<li></li>')
			.hide()
			.append('<a href="http://'+this.wikipediaUrl+'"><h2>'+this.title+'</h2></a><br /><p>'+ this.summary + '</p><span class="ui-li-aside"><h5>'+this.distance+' (km)</h5></span>')
			.appendTo('#wikiList')
			.show();
		});
		// Once the data is added to the DOM, make the transition
		$.mobile.changePage('#dashboard',"slide",false,true);
	
		// refresh the list to make sure the theme applies properly
		$('#wikiList').listview('refresh');
		
		
	});
};

// Success function for Geolocation call
function onSuccess(position)
{
	alert('getting position');
	geonames.search(position.coords.latitude,position.coords.longitude);
}

// Error function for Geolocation call
function onError(msg)
{
	geonames.search(47.667622,-122.384946);
}

</script>
</head>

<body>
<div data-role="page">
	<div data-role="header">
    	<h1>Find Location</h1>
	</div>
    <div data-role="content">
        <p>This application will use the <a href="http://geonames.org">Geonames</a> API and your location to bring back a list of Wikipedia articles about features that are near you. To get started, click the button below and allow the application to read your geolocation information.</p>
        <input type="button" value="Get My Location" id="getLocation" />
    </div>
    <div data-role="footer">
    	<h4>By <a href="http://blog.digitalbackcountry.com">Ryan Stewart</a></h4>
    </div>
</div>
<div data-role="page" id="dashboard">
	<div data-role="header">
    	<h1>Data List</h1>
    </div>
    <div data-role="content">
    	<ul id="wikiList" data-role="listview" data-theme="c">
        </ul>
    </div>
    <div data-role="footer">
    	<h4>By <a href="http://blog.digitalbackcountry.com">Ryan Stewart</a></h4>
    </div>
</div>
</body>
</html>

Initial URL

Initial Description

Initial Title

jQuery Mobile on the PlayBook WebWorks SDK

Initial Tags

javascript, html, jquery, html5

Initial Language

HTML

Choose a language for easy browsing: