I'm working on a project for a hybrid mobile app. I used ripple during the build fase for testing and debugging. I used phonegap/cordova to build the apk for android, and this went well. Only now it seems like the the deviceready event is not triggered.
On login I use the following javascript code;
document.addEventListener('deviceready', function() {
var email = $('#loginEmail');
var password = $('#loginPassword');
var base_url = $('#loginUrl');
email.val(window.localStorage.getItem('ptu_email'));
password.val(window.localStorage.getItem('ptu_password'));
base_url.val(window.localStorage.getItem('ptu_url'));
console.log(window.localStorage.getItem('ptu_url'));
$('#loginForm').on('submit', function(event) {
event.preventDefault();
$("#loginForm").validate();
company.BaseUrl = base_url.val();
company.LoginWithEmail(email.val(), password.val()).then(function() {
window.location = 'dashboard.html';
}, function(err) {
console.log("Error:");
console.log(err);
});
});
}, false);
This worked fine when using the ripple emulator but not with the apk installed on my galaxy s4. I looked at some other topics here, regarding issues with deviceready event but haven't find a solution yet. Anyone a idea whats going wrong here?
Use this approach.
<!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>Device Ready</title>
<script src="cordova.js"></script>
<script>
function onLoad() {
document.addEventListener('deviceready', main, false);
}
</script>
</head>
<body onload="onLoad()">
</body>
<script>
function main(){
}
</script>
</html>
Related
I've tried many variations of the script below, including changing the syntax and using window.prompt, but can't find a way to get the prompt to work.
Note: If there are errors in my other code (html), feel free to point them out, but focus on the JS - the page is loading perfectly with all elements, but the script simply doesn't run on a mobile device, even though it ran perfectly when I didn't have a prompt. Can you please help me?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>program</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
var accesskey="config";
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent) ) {
var attempt=window.prompt("Mobile browsers are not currently supported. If
you are a developer, enter the access key.")
if(accesskey!=attempt)
{
alert("Bye!");
window.location("https://google.com);
}
else
{
console.log("Authenticated");
}
}
</script>
</body>
</html>
You have a number of line breaks / spaces in your regular expression and prompt message.
window.location is not a function; simply assign the URL to it.
You are missing a closing " at the end of google.com.
Fixing up these three issues produces the following working example:
var accesskey = "config";
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var attempt = window.prompt("Mobile browsers are not currently supported. If you are a developer, enter the access key.")
if (accesskey != attempt) {
alert("Bye!");
window.location = "https://google.com";
} else {
console.log("Authenticated");
}
}
Hope this helps! :)
Prompt is working as below your regex is having line break and also its false so i have forced it to be true here.
Also window.location("https://google.com); is missing closing " and its a property not a function you should do window.location="https://google.com"
var accesskey="config";
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || true)
var attempt=window.prompt("Mobile browsers are not currently supported. If you are a developer, enter the access key.")
if(accesskey!=attempt)
{
alert("Bye!");
window.location ="https://google.com";
}
else
{
console.log("Authenticated");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>program</title>
</head>
<body>
</body>
</html>
I am writing a cordova (version 6) application for an Android 4.4 device. Here I am trying to catch the button-press events, e.g. volume-down button. Unfortunately I need to host the app on a server. Meaning all the html, css and js files are loaded remotely. Whereas the index.html of the app itself only contains:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>My App</title>
<script type="text/javascript">
function init() {
window.location.href="http://example.com:3000/myapp";
}
</script>
</head>
<body id="body" onload="init();">
</body>
</html>
On the server-side the cordova-js gets successfully injected with:
<script type="text/javascript" src="/assets/cordova.js"></script>
I have built the cordova-js by myself, using this repository and their documentation: https://github.com/apache/cordova-js
Most of the server-side cordova code is running fine! E.g. I have added some plugins which all work (wifi-information, show-toast-messages, and so on...). But unfortunately the button-listeners for menu, back, volup, voldown are not working anymore! They used to work, when the cordova code was loaded directly on the device, but since I put in on a remote server it doesn't work anymore.
JS-file from Server:
//Gets called from the body-tag of the html-site - works!
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
//This works!
console.log("onDeviceReady");
//This doesn't do anything (but also no error messages)
navigator.app.overrideButton("backbutton", true);
navigator.app.overrideButton("menubutton", true);
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
//Plugins that are loaded from here all work!
}
function onMenuKeyDown(event) {
//This doesn't work
console.log("menu pressed");
}
function onBackKeyDown(event) {
//This doesn't work
console.log("back pressed");
}
function onVolumeUpKeyDown() {
//This doesn't work
console.log("Volume up pressed");
}
Can someone tell me, why this code isn't working anymore and help me fix this?
Try like this...
//Gets called from the body-tag of the html-site - works!
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
//This works!
console.log("onDeviceReady");
}
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
function onMenuKeyDown(event) {
console.log("menu pressed");
}
function onBackKeyDown(event) {
console.log("back pressed");
}
function onVolumeUpKeyDown() {
console.log("Volume up pressed");
}
This question is already asked on stackoverflow here but I didn't found any answer to it, so I raised again this. Please can anyone able reply for this?
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Compass Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
navigator.compass.getCurrentHeading(onSuccess, onError);
}
function onSuccess(heading)
{
alert('Heading: ' + heading.magneticHeading);
}
function onError(compassError)
{
alert('Compass Error: ' + compassError.code);
}
</script>
</head>
<body>
<h1>Example</h1>
<p>getCurrentHeading</p>
</body>
</html>
Either your device does not have a magnetic sensor, or the vendor has not implemented support for it in the OS.
Looking at the Android source code for the device-orientation plugin, the startup code is written like this (modified for brevity):
List<Sensor> list = this.sensorManager.getSensorList(Sensor.TYPE_ORIENTATION);
// If found, then register as listener
if (list != null)
this.setStatus(CompassListener.STARTING);
// If error, then set status to error
else
this.setStatus(CompassListener.ERROR_FAILED_TO_START);
Not sure why they made up their own error code there (public static int ERROR_FAILED_TO_START = 3), but really they should be reporting COMPASS_NOT_SUPPORTED as defined in the documentation.
I have a Firefox OS app that makes calls to cross domain pages and downloads data to display on the app, wich all works fine because I used the systemXHR permission and appended the { mozSystem: true } on every XMLHttpRequest.
Then I attached the Flurry script, made the FlurryAgent calls in the .js of the app and started recieving the info from the events on the Flurry Event Logs when I ran it on the Firefox OS Simulator. When I tried to install my app on a Firefox OS device, the Flurry session never starts and the app never loads.
I don't understand why Flurry works on the simulator and not on the device. I checked a lot of times for the internet connection on the device, wich works fine for the browser and other apps that were already installed. And my app worked fine on the device before I had attached Flurry.
Here is a sample of my code:
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My App</title>
<link rel="stylesheet" href="js/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="css/mystyle.css" />
<script src="https://cdn.flurry.com/js/flurry.js"></script>
<script src="js/app.js"></script>
</head>
<body>
.js
$(document).on('pagebeforecreate', '[data-role="page"]', function(){
if ($(this).attr('id')=="splash"){
$.mobile.allowCrossDomainPages = true;
}
});
$(document).on('pageinit', '[data-role="page"]', function(){
console && console.log($(this).attr('id') + " - pageinit!!");
if ($(this).attr('id')=="splash"){
FlurryAgent.startSession("7ZFX9Z4CVT66KJBVP7CF"); //Here is were it crashes
alert("Inicio sesion flurry");
console && console.log($(this).attr('id') + "- Entro al if para el timer");
var timer = window.setTimeout(next, 10000);
}
});
If there is anything else that you need to help me figure out what happens, let me know.
The device I'm using is a Qualcomm model, especifically Peak and has the OS version: Boot2Gecko 1.1.1.0hd-GP
This may be a CSP issue. Have a look at: https://developer.mozilla.org/en-US/Apps/CSP?redirectlocale=en-US&redirectslug=Apps%2FCSP Specifically Remote scripts are banned.
Below is my markup in index.html
<html>
<head>
<title></title>
<link href="Styles/Style.css" rel="Stylesheet" />
<script src="Scripts/jquery-2.0.3.js" type="text/javascript"></script>
<script src ="Scripts/MyScripts.js" type="text/javascript"></script>
<script src="Scripts/cordova.js" type="text/javascript"></script>
</head>
<body>
<div id="test">Hello</div>
</body>
</html>
And Below is my script
window.onload = function () {
alert("test");
};
$(document).ready(function () {
alert("test2");
});
document.addEventListener("deviceready", "OnDeviceReady", false);
function OnDeviceReady()
{
alert("test3");
document.getElementById("test").innerHTML = "hello world";
}
I built the app using Phonegap build and tested it on android phone. The alerts in the first two functions are working fine, but the callback function for deviceready is not working. I'm am not sure if cordova.js is loaded correctly.
I downloaded phonegap and copied the config.xml and cordova.js from the following folder locations
\phonegap-2.9.1\phonegap-2.9.1\lib\android\cordova.js
\phonegap-2.9.1\phonegap-2.9.1\lib\android\example\res\xml\config.xml
I haven't made any changes to the config.xml yet. Could anyone please help me with my issue ? I am not sure what I'm doing wrong. Any help would be much appreciated. Thanks
You are passing a string as event handler and not the function. Try:
document.addEventListener("deviceready", OnDeviceReady, false);