i am trying to create a map with phonegap + google maps for ios. It works fine the first time but if I navigate to another page and then I return again to my maps page, nothing seems to happen, seems like deviceready is not fired. Any idea?
<script src="phonegap.js"></script>
<script src="maparestaurante.js"></script>
<link href="styles/retina.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
</head>
<body onload="onLoad()">
and the javascript:
function onLoad() {
document.addEventListener("deviceready", onLoad2, true);
}
function onLoad2() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
}
As I said, this works fine the first time, but if maps section visited again, it will never work, when testing it in the browser everyting worked fine
thx in advance
deviceReady will be fired only once. when the app is initialized. When you want to fire the load function when the page is visited again, you need to call the function again in the "page view " (which ever event supported by your SPA framework)event.
Related
I am working on an app for both android and iOS that will be opening external links. I am currently using cordova-plugin-inappbrowser 1.0.1 to open my links and it is working perfectly in Android, but I seem to be running into the same problem that many other people have. In iOS, I do not get a toolbar to appear and thus am stuck as I cannot click on the "done" button (or back/forward buttons for that matter.) I have built the app using both phonegap build online and through the command line tools, with the same behavior in each instance. It does not work in either an emulated environment or a native device environment. I have been searching online and this seems to be an extremely common problem, but none of the proposed solutions have worked over the past 2 days and ~15 hours of testing (for just a stupid little link!) I would like to remain in-app, but would not be opposed to going to safari if that is the only solution. My relevant code and versions:
Phonegap cli-5.1.1 (iOS 3.8/Android 4.02)
Cordova 3.5.0-0.2.7
cordova-plugin-inappbrowser 1.0.1
config.xml relevent code:
<plugins>
<plugin name="InAppBrowser" value="CDVInAppBrowser" />
</plugins>
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
index.html:
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script src="jquery/jquery.mobile-1.4.5.min.js"></script>
<script src="phonegap.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Global InAppBrowser reference
var iabRef = null;
function iabLoadStart(event) {
alert(event.type + ' - ' + event.url);
}
function iabLoadStop(event) {
alert(event.type + ' - ' + event.url);
}
function iabClose(event) {
alert(event.type);
iabRef.removeEventListener('loadstart', iabLoadStart);
iabRef.removeEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('exit', iabClose);
}
// Cordova is ready
//
function onDeviceReady() {
alert('Device is ready!');
//iabRef = window.open('http://apache.org', '_blank', 'location=yes');
//iabRef.addEventListener('loadstart', iabLoadStart);
//iabRef.addEventListener('loadstop', iabLoadStop);
//iabRef.addEventListener('exit', iabClose);
}
</script>
<style type="text/css">
.centeredImage
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
body
{
background: #000 !important;
background-image:url(backgrounds/1080widephone.png) !important;
background-size:cover !important;
}
.ui-content{
background: transparent !important;
}
.ui-page{
background: transparent !important;
}
.ui-footer{
background: transparent !important;
}
</style>
</head>
Various links (all act as buttons):
window.open('url' ,'_blank')
(NOTE: This appears to open in the default WebView for iOS and the inappbrowser for Android)
cordova.InAppBrowser.open('url' ,'_blank', 'location=yes' , 'toolbar=yes', 'toolbarposition=top' , closebuttoncaption=Return'
(NOTE: Nothing happens when I use this in either iOS or Android builds. I based this syntax off of the description)
My kneejerk reaction is that the plugin isn't loading, but I don't see how that can be the case if it is clearly working in an android build but not an iOS build using exactly the same code on phonegap build. Any help would be greatly appreciated, I feel like I'm running around in circles here!
I know this is a late response but I’ve found one possible solution.
In my case, I was using ngCordova’s $InAppBrowser within the Ionic framework to open a file or url. To test this, I was using Xcode’s iPhone simulator as well as Ionic’s “Ionic View” app. Within both of these options, $InAppBrowser will NOT show a “Back” or “Done” button.
However, if you open your project’s .xcodeproj in Xcode and run your application on an actual iOS device, the InAppBrowser should work as expected.
I spent hours on this issue only to discover Ionic View restricts the options of $InAppBrowser. However, I’m still not 100% sure as to why this doesn’t work in the iOS emulator.
Note: I believe all of this applies even if you’re directly using Cordova and not ngCordova.
The values for the options string in
cordova.InAppBrowser.open
needs to be a single string of name=value pairs separated by ,
So try:
cordova.InAppBrowser.open('url' ,'_blank', 'location=yes,toolbar=yes,toolbarposition=top,closebuttoncaption=Return');
Additionally you should make sure your application's links open with the IAB by hijacking them and opening them in the IAB and suppressing the default event... for example with JQuery to hijack all the links in a div with id "infoExternalContent" and open them in the IAB with some options set for iOS only (using Cordova device platform to detect platform):
$('#infoExternalContent').find('a').each(
function() {
var href = $(this).attr('href');
var iabOptions = (device.platform === 'iOS' ? 'location=no,enableViewportScale=yes,transitionstyle=fliphorizontal' : '');
if (href.indexOf('http') === 0) {
$(this).click(function(e) {
e.preventDefault();
cordova.InAppBrowser.open(''.concat(this.href), '_blank', iabOptions);
});
}
}
);
I don't use phonegap build, but I can't imagine that it wants all of this loaded ...
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="jquery/jquery-2.1.4.min.js"></script>
<script src="jquery/jquery.mobile-1.4.5.min.js"></script>
<script src="phonegap.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>
cordova.js is loaded twice, along with phonegap.js. Just sayin'
If you uncomment
iabRef = window.open('http://apache.org', '_blank', 'location=yes');
What happens?
I would also try
cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
If neither of those open a window to apache, I would readd the plugin.
edit: This questions is solved
Stupidly enough, the url /img/images.json is treated differently by the simpleHttpServer used to test the application than by the iOS simulator.
It was a long search why it would show the list in the browser when testing but not in the simulator. Apparently the simpleHttpServer that comes with python will treat a url starting with the / as it's root, for example the www folder. The simulator does not and would appreciate a relative location, starting with no /
The problem seems mostly caused by the rustiness of my web-dev skills ^.^
====================
I am trying to make a simple ionic app, and for some input I am using the Angular Tutorial.
I have a very simple page that should load the contents of a json-file with image data. And all it needs to do for now is showing the image names. At the end it should dump the complete data from the json-file.
This is all based of the blank project created with ionic.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="phocalsApp">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="imageListCtl">
<ul class="imagelist">
<li ng-repeat="image in imagelist" >
{{image.imgName}}
</li>
</ul>
{{imagelist | json}}
</ion-content>
</ion-pane>
</body>
</html>
app.js:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('phocalsApp', ['ionic', 'phocalsControllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
controller.js
'use strict';
var phocalsControllers = angular.module('phocalsControllers', []);
phocalsControllers.controller('imageListCtl', ['$scope', '$http',
function($scope, $http) {
$http.get('/img/images.json').success(function(data) {
$scope.imagelist = data;
});
$scope.orderProp = 'imgDate';
}]);
images.json:
[
{
"imgUrl":"",
"imgName":"Nieuwste Foto",
"imgDate":20140525
},
{
"imgUrl":"",
"imgName":"tweede Foto",
"imgDate":20140524
},
{
"imgUrl":"",
"imgName":"derde Foto",
"imgDate":20140523
}
]
Seeing as I pretty much use the same code as the angular example, I would expect this to work, unfortunately all the output I am getting when running in the ios Simulator is an empty page with the header-bar. No errors or nothing. Can anyone tell me what I am doing wrong here?
You are missing some console.log(data) in your controller to check whether the controller is initialized, wether $http actually succeeds etc.
Even after using angular for months, i have to log every step cause there are too many things to go wrong :)
Also you should add an error function to
$http.get('/img/images.json').success(function(data) {
$scope.imagelist = data;
}).error(function(data) ....;
I'm trying to get a slider to work in with JQuery Mobile 1.4.2.
What I would like to do is to use the slidestop event to update a value elsewhere. However, the slidestop event does not fire. I created a test file and tested in Safari and Firefox. Nothing happens when I stop sliding the slider. Could someone please tell me what tutorial I missed?
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
<script src="js/jquery.min.js">
</script>
<script src="js/jquery.mobile.js">
</script>
<title>Concertzender</title>
</head>
<body>
<label for="slider-step">Input slider:</label>
<input type="range" name="slider-step" id="slider-step" value="150" min="0" max="500" step="10" />
</body>
<script>
$( "#slider-step" ).on('slidestop',function( event ) { alert("slidestop event fired"); });
</script>
</html>
EDIT:
I tried the answer suggested below, but I have a slightly more complicated setup than the example above and, therefore, it doesn't work out.
I am trying to avoid the page structure of JQuery Mobile and just use it for the slider. The thing is, when I change to another page, a pagecreate or pageshow is not present, so I cannot wait for those events. What I want is to create a new slider (or rather replace an empty div with another already existing div and then change the id of the formerly empty div's input id. So what I am left with is a unique newly ID'ed input (with corresponding label).
How would I go about and use the slidestop to interact with the new slider? I tried this:
$('newslider').slider();
$('newslider').on('slidestop', function(){alert("slidestop");});
But that gives me two sliders in Safari, of which one does the slidestop and the other is unresponsive. In iOS, however, I get one slider that slides, but does not fire a slidestop event. Omitting the first line gives me an unresponsive slider in Safari and one that doesn't fire in iOS.
So my question is pretty simple: How to enable the slidestop event for a new slider without using JQuery Mobile's pages?
You need to wrap all events/bindings in pagecreate.
$(document).on("pagecreate", function () {
$("#slider-step").on('slidestop', function (event) {
console.log("slidestop event fired");
});
});
Demo
We are displaying some ads in our iOS & Android applications using the Google Mobile Ads SDK. We need some parameters to make a web service call when the user clicks on the Ad and we get them using the GADAppEventDelegate, and after the web service call we present a custom screen. (so we don't want to redirect the user to a Web Page). The problem is that the Clicks are not tracked and we believe that Ad Creative might not be configured right.
<html><body leftMargin="0" topMargin="0" marginwidth="0" marginheight="0">
<html>
<head>
<script src="http://media.admob.com/api/v1/google_mobile_app_ads.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function fireEvent() {
admob.events.dispatchAppEvent("query_string", "ad_origin_key=USPS2013_iPhone_Upgraded_320x50&k_key=&acid_key=719768856&ad_image_url_key=http://USPS2013_iphone_320x50");
}
</script>
</head>
<body>
<img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgIDQ59KwChABGAEyCKGNWPM-wPBl" width="320" height="50" border="0" onclick="fireEvent()"/>
</body>
</html></body></html>
I believe that in order not to be redirected to a Web Page we should make an AJAX request in fireEvent() function, something like $.get("%%CLICK_URL_UNESC%%www.example.com/ads/landingpage"); but the browser doesn't allow AJAX request to a server different of the original request server.
So how could we solve this issue, track the clicks and not navigate to a new web page?
Thanks
Hello i think this answer is a bit late but the code you quoted actually works!!
Inside your head tag of HTML of the creative
<script src="http://media.admob.com/api/v1/google_mobile_app_ads.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// Send an event when ad loads.
// admob.events.dispatchAppEvent("adId", "1");
// handle your click with onClick="handleClick()"
handleClick = function() {
admob.log("click ad: call handleClick()"); // call a log to XCode console for debug
// Send an event when ad is clicked.
admob.events.dispatchAppEvent("eventName", "params"); //{action}|{action params}...
//magic goes here
//i think the click measure through this url
//and use jQuery get that send get method without callbacks
$.get("%%CLICK_URL_UNESC%%")
};
</script>
You have to wait a while like 30 mins then you will see the click stats in your DFP console.
I've been trying to figure this out but still stuck.
so I'm using PhoneGap for iOS and JQueryMobile.
I'm trying to show alert when a button is clicked.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
and I have
this
Login
$(document).ready("#button").click(function() {
alert('button clicked');
});
when I tried to launch this in chrome, this works fine.
however, when I used iphone simulator, it doesnt show anything.
For a normal web application you would use dom ready i.e.
$(function(){ // <-- this is a shortcut for $(document).ready(function(){ ... });
$('#button').click(function(){
alert('button clicked');
});
});
However in a JQM application it is much more useful to bind to 'pageinit' i.e.
$(document).on('pageinit','[data-role=page]',function(){
$('#button').click(function(){
alert('button clicked');
});
});
Binding to pageinit works better because JQM inserts new pages into the same dom as the first page. Because of this all of your code in dom ready doesn't get called again. So that first bit of code i put above will only work for that first page in your JQM application. The second will work no matter what page your button is in. Let me know if I can clarify this further for you.