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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -