Monday, April 23, 2012

Jquery Mobile "pageinit" not firing

Im trying to use the Geolocation API with Jquery Mobile. Everything works fine if i browse directly to my page from the browser.

But, if i navigate to it from another page, it does not load.

Also, if i remove the line of code with the "pageinit" command, i get the same issue/error but if i refresh the page it will load.

I know it has something to do with the way the DOM is handled through AJAX but i cant seem to get it to work the way it should/i want it to.

<!DOCTYPE html>
<title>My Location</title>
<link rel="stylesheet" href="" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

<div data-role="page" id="geoPage">

<script type="text/javascript">

$("#geoPage").live("pageinit", function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('Geolocation not supported');

function success(position) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
var mapcanvas = $('#mapcanvas');
var map = new google.maps.Map(mapcanvas[0], myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"I am here!"



function error(msg) {
var errMsg = typeof msg == 'string' ? msg : "Geolocation failed";


$.mobile.changePage( "extension.htm", { transition: "slide"} );


<div data-role="header">
<h1>My Location</h1>
<div data-role="content">
<div id="msg"></div>
<div id="mapcanvas" style="height: 250px; width:250px;"></div>
<input id="continue7" type="button" value="Conintue" />


No comments:

Post a Comment