Phonegap + Jquery mobile no Android: várias páginas HTML Javascript não funciona

Question

Apr 06, 2013, 09:43 AM

cordova android jquery-mobile

Phonegap + Jquery mobile no Android: várias páginas HTML Javascript não funciona

O Javascript não funciona fora da página index.html:

Teste de Projeto 1:

Index.html (com GEOLOCATION PAGE CODE)funciona bem

Teste de Projeto 2:

Index.html (com o MENU PAGE CODE)

Geolocation.html (com GEOLOCATION PAGE CODE)javascript não funciona

Abre-se a página Geolocation.html, mas o javascript não é executado.

O que estou perdendo?

CÓDIGO DE PÁGINA DE GEOLOCAÇÃO:

<!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>

CÓDIGO DA PÁGINA DO MENU:

<!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>

Eu também tentei adicionar uma função onload à tag body e chamar uma função de teste, mas também não funcionou.