cordova - Phonegap + Jquery mobile on Android: Multiple HTML Pages Javascript not working -
javascript not work outside index.html page:
project test 1:
index.html (with geolocation page code) works fine
project test 2:
index.html (with menu page code)
geolocation.html (with geolocation page code) javascript not work
the page geolocation.html opens up, javascript not run.
what missing?
geolocation page code:
<!doctype html> <html> <head> <!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />--> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" charset="utf-8" src="js/cordova-2.5.0.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> document.addeventlistener("deviceready", ondeviceready, false); function ondeviceready() { var element = document.getelementbyid('geotemp'); element.innerhtml = 'ready...'; navigator.geolocation.getcurrentposition(onsuccess, onerror, { maximumage: 3000, timeout: 10000, enablehighaccuracy: false }); } function onsuccess(position) { var element = document.getelementbyid('geotemp'); element.innerhtml = 'success...'; initialize(position.coords.latitude, position.coords.longitude); } function onerror(error) { var element = document.getelementbyid('geotemp'); element.innerhtml = 'error...'; alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } function initialize(latitude, longitude) { var mapoptions = { center: new google.maps.latlng(latitude, longitude), zoom: 12, maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid("map_canvas"), mapoptions); } function onbodyload(){ alert("test!"); } </script> </head> <body> <h2>location</h2> <p id="geolocation">finding geolocation...</p> <p id="geotemp"></p> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
menu page code:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>test</title> <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css"> <link rel="shortcut icon" href="favicon.ico"> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.3.0.js"></script> <script type="text/javascript" src="js/cordova-2.5.0.js"></script> </head> <body> <div data-role="page" id="pagemain"> <div data-role="header"> <h1> testpage </h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="geolocation.html" data-transition="slide"> <h2>geolocation test</h2> <p>testing</p> </a></li> </ul> </div> </div> </body> </html>
i have tried add onload function body tag , call test function didn't work either.
in link geolocation.html, add attribute data-ajax="false"
. prevent jquery loading page via ajax.
Comments
Post a Comment