PhoneGap Build...what's wrong with MY code?

  • 1
  • Question
  • Updated 9 years ago
  • Answered
HTML:


<html>
<head>
<title>Uploader</title>

<link href="jquery.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" charset="utf-8" src="phonegap.js"></
script>
<script type="text/javascript" charset="utf-8" src="jquery.min.js"></
script>
<script type="text/javascript" charset="utf-8" src="functions.js"></
script>
</head>

<body onLoad="onLoad()">
<p id="geolocation"><h4>Finding geolocation...</h4></p>
<br/>
<p><h5>Upload Status:</h5></p>
<p id="retVal"></p>
</body>
</html>

=============================================================
functions.js:

var userID = null;

// onError Callback receives a PositionError object
//
function onError(error) {
var element = $('#geolocation');
element.innerHTML = 'ErrorCode: ' + error.code + '
ErrorMessage:
' + error.message + '
';

}

// onSuccess Geolocation
//
function onSuccess(position) {
var element = $('#geolocation');
element.innerHTML = 'Uploading to BTST:
'+
'Latitude : ' + position.coords.latitude + '
' +
'Longitude: ' + position.coords.longitude + '
' +
'Heading : ' + position.coords.heading + '
' +
'Speed : ' + position.coords.speed + '

' +
'UserID : ' + userID + '
';

var outputE = $('#retVal');
var currentD = new Date();
var myRID = currentD.getMonth() + currentD.getDate();

var upD = newDate(position.timestamp);
var myTime = upD.getHours() + ":" + upD.getMinutes() + ":" +
upD.getSeconds() ;

outputE.innerHTML = myRID + " - " + myTime;

}

// PhoneGap is ready
//
function onDeviceReady() {
userID = device.uuid;
var options = { enableHighAccuracy: true, maximumAge: 500 };
navigator.geolocation.usePhoneGap();
var watchID = navigator.geolocation.watchPosition(onSuccess, onError,
options);

}

// Wait for PhoneGap to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
==============================================
Either I get just the HTML showing with no updates....or a white screen...

Any ideas?
Photo of SCGrant327

SCGrant327

  • 19 Posts
  • 0 Reply Likes
  • frustrated

Posted 9 years ago

  • 1
Photo of Noah Mapstead

Noah Mapstead

  • 4 Posts
  • 0 Reply Likes
Hello,

I don't have an answer for you, but here is my code which uses jquerymobile. Do you get the same error when you load your code in a desktop browser?

Can you get your code to just return a hello world message instead of the geolocation?

Thanks
-Noah




<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="ui-mobile landscape min-width-320px min-width-480px min-width-768px min-width-1024px" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">

<title>ScoutSpirit.com</title>
<link rel="stylesheet" href="jquery.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});

</script>
<script type="text/javascript" src="jquerymobile.js"></script>
</head><body>
<form class="ui-mobile-viewport" method="post" action="" id="form1">

<div class="ui-page ui-body-c ui-page-active" data-url="" data-role="page">

<div role="banner" class="ui-bar-a ui-header" data-role="header">

<h1 aria-level="1" role="heading" tabindex="0" class="ui-title">ScoutSpirit.com</h1>
<a data-theme="a" title="Home" href="http://m.scoutspirit.com/default.aspx" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home ui-btn ui-btn-up-a ui-btn-icon-notext ui-btn-corner-all ui-shadow"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Home</span><span class="ui-icon ui-icon-home ui-icon-shadow"></span></span></a>

</div><!-- /header -->

<div role="main" class="ui-content" data-role="content">

<ul class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined" role="heading" data-role="list-divider">Menu</li>
<li class="ui-btn ui-btn-icon-right ui-li ui-corner-bottom ui-btn-up-c" data-theme="c"><div class="ui-btn-inner ui-li ui-corner-bottom"><div class="ui-btn-text"><a class="ui-link-inherit" href="http://m.scoutspirit.com/logindes.aspx">Login</a></div><span class="ui-icon ui-icon-arrow-r"></span></div></li>
</ul>

</div><!-- /content -->

<div role="contentinfo" class="ui-bar-a ui-footer" data-role="footer">

</div><!-- /footer -->
</div>
<div style="top: 327.5px;" class="ui-loader ui-body-a ui-corner-all"><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div></form>
</body></html>

Photo of Andrew Lunny

Andrew Lunny

  • 1911 Posts
  • 199 Reply Likes
jQuery's $ function returns a jQuery object wrapping the matched DOM nodes, not a single DOM element> You will want to replace all the code that looks like this:


var element = $('#geolocation');
element.innerHTML = '[some html]'


with code that looks like this:


var element = $('#geolocation');
element.html('[some html]')