New to phonegap and ran into a problem on my first try. This works online, fails to start geolocation (or something) on the emulator, and gives me "Uncaught ReferenceError: google is not defined:41" error when uploading to my device.
The only thing I can think of is it is not loading the map js file, or some order is not being built correctly. All examples and projects i have seen conveniently skip actual device testing.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>asd</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/codiqa.ext.min.css" rel="stylesheet">
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/codiqa.ext.min.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MYKEY0&sensor=true">
</script>
<style>
html{height:100%;}
body{height:100%; margin:0; padding:0;}
#map-canvas{height:50%;}
#content {
padding:0;
position:absolute !important;
top:40px !important;
right:0;
bottom:40px !important;
left:0 !important;
z-index:10;
}
#bottom {margin-top:65%;}
</style>
<script type="text/javascript">
$(document).on('pageinit', '#page1', function(e,data) { getPos(); });
var lat;
var lng;
function getPos(){ navigator.geolocation.getCurrentPosition(onSuccess, onError); }
function initializeMap() {
console.log('init: '+lat+':'+lng);
var myLatlng = new google.maps.LatLng(lat,lng);
var mapOptions = {
zoom:8,
center:myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
function onSuccess(position){
lat = position.coords.latitude;
lng = position.coords.longitude;
console.log(lat+":"+lng);
initializeMap();
}
function onError(error){
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
</script>
</head>
<body>
<div id="page1" data-role="page" data-theme="a">
<div data-theme="a" data-role="header">
<h3>MapIt</h3>
<a data-rel="back">Back</a>
</div>
<div data-role="content" id="content">
<div id="map-canvas"></div>
</div>
<div id="bottom">
AddMarkers
<div data-controltype="textinput">
<input name="" id="textinput2" placeholder="City and state" value="" type="text">
</div>
<input type="submit" value="Submit">
<input type="submit" value="My Location">
</div>
</div>
</body>
</html>
I have tried every solution Ive seen on here and the web. Surprisingly there is only a page and a half of google results with this title and phonegap.
On my phone is does display everything but the map.
It is this line that it fails
var myLatlng = new google.maps.LatLng(lat,lng);
Thanks in advance.
****UPDATE SOLVED****
It was the white list
There is two of them that need to be changed to this
in assets/www/config.xml
in res/xml/config.xml
I had changed the one next to the index.html file and didnt know the other was there in res/xml. Above the index.html file there is a res folder that I looked in and didnt see an xml folder.
Hope this bit of info helps someone else
It was the white list There is two of them that need to be changed to this
<access origin="*" />
1.in /assets/www/config.xml
2.in /res/xml/config.xml
I had changed the one next to the index.html file and didnt know the other was there in res/xml. Above the index.html file there is a res folder that I looked in and didnt see an xml folder.
Hope this bit of info helps someone else
Related
Guys I'm currently working on the development of an app using phonegap on eclipse, but I hit a bump when I'm trying to display an image, I have tried thousands of ways to modify my code, but the image just cannot be displayed, but when I browsed through others' coding, I didn't see much difference, will really appreciate it if you guys could help me figure out.
My code for a certain page is shown below:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Us</title>
<link rel="stylesheet" href = "css/jquery.mobile-1.4.5.min.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js">
<script src = "js/jquery.mobile-1.4.5.min.js." type = "text/javascript" charset = "utf-8" src = "cordova-2.3.0.js"></script>
<script type = "text/javascript">
function onBodyLoad() {
document.addEventListener("deviceready", PhonegapLoaded, false);
}
function PhonegapLoaded(){
document.addEventListener("backbutton", function(e){
e.preventDefault();
alert("Back Button Pressed");
navigator.app.backHistory();
}, true);
}
</script>
</head>
<body onload = "onBodyLoad();">
<div data-role = "page" id = "aboutus">
Back
<div class="ui-btn-active" data-role="header" data-theme="b">
<h1>ABOUT US</h1>
</div>
<div data-role="content">
<img src="images/icon.png">
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
You must use this route:
<img src="images/icon.png">
Hi I am developing a native android application in phone-gap ,in that application I want to upload a image file through chose file button when I click the button I want to open the device gallery but the gallery window is not opening.I can open the gallery windows when I load through browser in device but cant make it natively for android,so please help me find solution for this.
Will the phone gap scripting file changes for various platform or it needs any plugin files to be added for various platforms in phone gap or I need to add any cordova.js files to root files(like WWW).
I have doubt that any kind of version compatibility issues in phone gap or device so please help me.
for further details i will add my code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="js/jquery/plugins/jqtransform/jqtransform.css" />
<title> Mobile</title>
<script src="js/jquery/jquery162min.js" type="text/javascript"></script>
<script src="js/jquery/plugins/accordion/jqueryui1814custommin.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery/plugins/jqtransform/jqtransform.js" ></script>
<script src="js/mgeneral.js" type="text/javascript"></script>
<script src="../js/pl/plupload.js" type="text/javascript"></script>
<script src="../js/pl/plupload.html5.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
/*Set skin for select, options and checkbox*/
$('.skinnable').jqTransform({ imgPath: 'img/' });
$('#apply-to-selection-2').click(function (e) {
e.preventDefault();
Logout();
if (RTNCODE)
window.location = "index.html";
});
/*table row select*/
$("table.grid thead tr th.col-row-select input").click(function () {
if (!$(this).is(":checked")) {
$("table.grid tbody tr td.col-row-select input").each(function () {
$(this).attr("checked", true);
$(this).change();
});
}
else {
$("table.grid tbody tr td.col-row-select input").each(function () {
$(this).attr("checked", false);
$(this).change();
});
}
});
/*END table row select*/
/*Create accordion*/
$(".accordion").accordion({
header: ".accordion-tab",
collapsible: true,
active: 0,
autoHeight: false
});
});
</script>
<script type="text/javascript">
$(function () { //image loader
var uploaderimage = new plupload.Uploader({
// General settings
runtimes: 'html5',
container: 'imagecontainer',
browse_button: 'pickfiles',
url: '/imageupload.ashx?mobile=true',
multi_selection: false,
max_file_size: '10mb',
//chunk_size: '1mb',
multipart: true,
urlstream_upload: true,
// Specify what files to browse for
filters: [
{ title: "Image files", extensions: "jpg,gif,png" }
]
});
uploaderimage.init();
uploaderimage.bind('FilesAdded', function (up, files) {
// showmodalmask();
uploaderimage.start();
$('.imgpre').show();
$('.imgcpl').hide();
});
uploaderimage.bind('FileUploaded', function (up, file) {
if (uploaderimage.total.uploaded == uploaderimage.files.length) {
// $('.btnrefresh').click();
$('.imgcpl').show();
$('.imgpre').hide();
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="frame">
<div class="frame-border-top"></div>
<div class="frame-border-middle">
<div class="cute" style="">
<h1 class="header" style="color:transparent; width:270px; height:20px;">
</h1></div>
<!-- MENU START XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<div id="tabs-2" style="background-color:Black; border:1px solid #363636;">
<div style="margin-left:-15px; margin-top:-6px;">
<div class="form-row padding-lr-5" style="text-align:center;">
<div id="imagecontainer" >
<div id="filelist"></div>
<br />
<a id="pickfiles" href="#" style="background-color: #447cd1; color: white; border: 2px solid #113b7c; border-radius: 12px; padding: 6px 10px; font-size: 12pt; text-decoration: none">Select file</a>
</div>
<br />
<div class="holderloderp imgpre" style="display:none"><img src="../images/pnl-preloader2.gif" width="25" height="25" alt="" class="pnl-preloader2" /></div>
<div class="imgcpl" style="color: green; display: none" >Complete</div>
</div>
<div class="clear" style="height:25px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to use the FileTransfer object of the phonegap API which will do the upload to your server using any server side script file handler.
Look at this link
In a nutshell, I've built an app using HTML/CSS/JS and Phonegap. It's still in testing phase. I have all my app's images saved in Google Cloud Storage (GCS). I have image tags (divs) within my app that needs to pull those images from GCS to the specific div. However, this method of just adding the direct URL only seems to work on iOS devices. What I need to know is, what is the correct method of pulling those images from GCS to my app so that it works on all platforms (iOS, Android, BlackBerry etc)? Do I need to add a line of code in the head of my index.html or does it have something to do with the config.xml? I've been looking for answers on the net, but nothing could give me clear-cut results that works across all platforms.
I'm still fairly new to the whole "app building game", please be gentle.
Here is some code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1"/>
<title>App Name</title>
<link href="simple-flat.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile-1.3.1 /jquery.mobile.structure-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link href="General.css" rel="stylesheet" type="text/css"/>
<link href="owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.mobile-1.3.1 /demos/js/jquery.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.1 /demos/js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="maps.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/raleway:n1:default.js" type="text/javascript></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("offline", onOffline, false);
}
function onOffline() {
navigator.notification.alert('Please check your internet connection', function()
{ },'Connection Failure','OK');
window.location = "index.html#offline";
}
</script>
</head>
<body onload="onLoad()">
<div id="cultures" data-role="page" data-theme="a" >
<div data-role="header" id="header" data-theme="a" data-position="fixed">
<h1>Headline</h1>
<div id="image" data-theme="c">
<img src="http://commondatastorage.googleapis.com/about_namibia%2FHimba.jpg" width="100%"/></div>
<div class="headline_bar"><h3>Cultures</h3></div>
</div>
<div data-role="content">
<p>Some copy goes here.</p>
</div>
<div data-role="footer" id="footer" class="ui-bar" data-position="fixed">
</div>
</div>
</body>
</html>
I have phonegap application at html5, with kendo ui.
My button work fine on browser, but at android device I need to click three times to fire the alert.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/kendo.all.min.js"></script>
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" data-title="Login/Sign-up"
id="view-transitions-login" data-transition="overlay:left"
style="background-color: white;">
<input type="button" id="logButton" value="login"
style="width: 100px; height: 60px" />
</div>
<script>
$(document).ready(function() {
$("#logButton").click(function() {
alert(33);
});
});
</script>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
Thanks in advance.
I'm found the answer.
I used the latest version of kendo.all.min, and That made the problem.
I changed the file and everything works as it should.
I have a problem with AJax/Json petitions with PhoneGap. I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cartelera</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="my.css" />
<style>
/* App custom styles */
</style>
<script src="cordova-2.0.0.js">
</script>
<script src="js/jquery.min.js">
</script>
<script src="js/jquery.mobile.js">
</script>
<script src="my.js">
</script>
<script>
$(document).ready(function(){
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
//$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" > Prueba 1 </a></li>');
//$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" > Prueba 2 </a></li>');
$('#cargaDiv').html('<img src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/images/ajax-loader.gif" /> Cargando...'); // Loading message
$.getJSON("http://www.cinesimf.com/rss/JSONTorrevieja.php",
function(data){
for (i=0;i<data.length;i++)
{
$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" >'+data[i].titulo+'</a></li>');
}
$('#cargaDiv').html(''); //Remove Loading message
$("#ulCartelera").listview('refresh');
})
})
</script>
</head>
<body>
<div data-role="page" id="cartelerafinestrat">
<div data-role="header">
Atras
<h1>IMF Finestrat</h1>
</div>
<div id="cargaDiv">
</div>
<div id="cartelera">
<ul id="ulCartelera" data-role="listview" class="ui-listview" data-theme="d" data_dividertheme="b">
</ul>
</div>
</div>
</body>
</html>
</pre>
I have added in config.xml (/res/xml/) my domain ("http://www.cinesimf.com/*") in the phonegap whitelist.
If I try the code in a navigator in my pc, it works OK, but in Android aplication nevers load.
Your problem depends on a general webkit (and modern browsers) issue.
If you want to do a json request to a cross-domain server you have to modify your manifest file on Android or your plist file non Iphone, inserting the allowed domains where you want to get your data.
You could also do a jsonp request to avoid manifests updates:
$.getJSON("http://www.cinesimf.com/rss/JSONTorrevieja.php?callback=?",
function(data){
for (i=0;i<data.length;i++)
{
$("#ulCartelera").append('<li><a href="app.html" data-transition="slide" text="hola" >'+data[i].titulo+'</a></li>');
}
$('#cargaDiv').html(''); //Remove Loading message
$("#ulCartelera").listview('refresh');
})
You can have a good explanation about jsonp there: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/