Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery Mobile "pageinit" not firing
    primarykey
    data
    text
    <p>Im trying to use the Geolocation API with Jquery Mobile. Everything works fine if i browse directly to my page from the browser.</p> <p>But, if i navigate to it from another page, it does not load.</p> <p>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.</p> <p>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.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;My Location&lt;/title&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div data-role="page" id="geoPage"&gt; &lt;script type="text/javascript"&gt; $("#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!" }); //alert(latlng); } function error(msg) { var errMsg = typeof msg == 'string' ? msg : "Geolocation failed"; $('#msg').html(errMsg); } $("#continue7").click(function(e){ $.mobile.changePage( "extension.htm", { transition: "slide"} ); }); &lt;/script&gt; &lt;div data-role="header"&gt; &lt;h1&gt;My Location&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;div id="msg"&gt;&lt;/div&gt; &lt;div id="mapcanvas" style="height: 250px; width:250px;"&gt;&lt;/div&gt; &lt;input id="continue7" type="button" value="Conintue" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload