I'm new to phonegap so I just tried something out and was starting with the onDeviceReady method. The problem I'm encountering is, that the method doesn't fire.
This is my complete code, pretty basic.
<!DOCTYPE html>
<html>
<head>
<title>Splashscreen Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
$("#texttest").css("display", "none");
}
</script>
</head>
<body>
<div id="texttest" style="display:block">text</div>
</body>
</html>
So now, when the app is launched the text should be hidden right? Well, the entire div should, but the device still shows me the "text". What am I doing wrong there? I also tried some other basic methods like
$("#texttest").hide()
but that didn't work either. This is the MainActivity.java
package de.activevaluetenthousandfliesphonegap;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import org.apache.cordova.*;
public class MainActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Ensure you have the correct version of cordova.js for the platform you are targetting.
Also what version of Phonegap are you using ?
Please try removing the font-awesome, if included. They have some compatibily issues with its css file.
<link rel="stylesheet" href="css/font-awesome.min.css" />
I had the same problem once and solved when I removed the above line from my code,
<!DOCTYPE html>
<html>
<head>
<title>Splashscreen Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
$("#texttest").css("display", "none");
}
</script>
</head>
<body onload="onLoad()">
<div id="texttest" style="display:block">text</div>
</body>
</html>
Here is what I think you need to do:
$(document).ready(function(){
document.addEventListener("deviceready", onDeviceReady, false);
}
Because when your device ready triggers jQuery hasn't loaded - this will ensure you do the following:
1. Get jQuery
2. Trigger PhoneGap deviceready
Also remove your onLoad() function ! :)
First of all You need to test it as an application in the emulator/mobile and not on the web browser. Secondly if you want to use geolocation then you can use it like this
function onDeviceReady() {
console.log("we are an app");
MyApp.initialize_phonegap();
}
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
</script>
</head>
<body onload="onBodyLoad()">
It is working on my ripple emulator. But I use jquery-1.9.1.js and cordova 2.7 ?
I was using the cordova.js shared by my colleague who is an iOS developer. I replaced that with the latest cordova.js from the Cordova site and it started to work pretty well.
After creating your app using cordova, the index.js (or build.js) contains something like
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
in the default event handler function "receivedEvent".
These lines only work fine for the Hello-World-Dummy of Cordova. As soon as you replace the content of the index.html "parentElement" will be undefined. That leads to a javascript error
Uncaught TypeError: Cannot read property 'querySelector' of null
at Object.receivedEvent (index.js:37)
at Object.onDeviceReady (index.js:31)
at Channel.fire (cordova.js:846)
at cordova.js:231
The index.html of the cordova Hello-World contains a container
<div id="deviceready" class="blink">
As soon as you remove this, the build of the app failes with the mentioned JavaScript-Error.
You can simply replace the lines above with something like
if (id=="deviceready")
{
console.log("addEventListener for backbutton");
$("#texttest").css("display", "none");
// ... whatever
}
Related
I am developing a test app in PhoneGap build. Currently I'm trying to redirect to a page when the app loads. But when I tried to do that, it is not redirecting, instead staying in index.html page only. I am using TestObject for testing the app.
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8">
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady() {
alert("Device is ready");
}
</script>
</head>
<body onload="init();">
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
Hai welcome to my app
</body>
</html>
config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.mydomain.mobileApp"
versionCode = "1"
version = "1.0.0" >
<!-- versionCode is Android only -->
<!-- version is in major.minor.patch format -->
<name>My App</name>
<description>
An example for phonegap build app which wont show up in the playstore.
</description>
<author href="https://YourWebsite.com" email="yourEmail#goesHere.com">
Name Of The Author
</author>
</widget>
When I test this in browser, on clicking button it will redirect to http://google.com. But when I upload the apk (build from phonebuild) and upload to TestObject, button is coming. But on clicking it nothing happens. When I test the app,I'm getting like this.
Can anyone help me to find the issue. Thanks in advance.
You need to include cordova in your application
and try this one as well
document.addEventListener("deviceready", function(){
alert("Device ready Fire");
},true);
Include phonegap.js in head section of HTML file and do not make the click event handler inline. Register the event handler in script part. And also make sure you have included whitelist plugin. Try following code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript">
function myFun(){
document.getElementById("myBtn").addEventListener("click", function(){
location.href='http://google.com';
});
}
</script>
</head>
<body onload="myFun()">
<button id="myBtn">Go to Google</button>
Hai welcome to my app
</body>
</html>
I'm a little bit confused about how cordova works (i'm using android)...i've got an html page with this button:
<button id="mannaggia">mannaggia</button>
i'm trying to insert a javascript tag:
<script>
document.getElementById("mannaggia").addEventListener("click", myFunction);
myFunction(){
alert('is anybody out there?');
window.location="pag2.html";
}
</script>
nothing happens..
trying to insert a function in index.js outside this page is the same result...thank you
The function is declared after you added the event listener, so myFunction was undefined. Try putting the function before you add listener.
Revisit your html file once again.
best place to start your code are inside the device ready event
read more here Phonegap
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
// Now safe to use device APIs
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
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 an CWE (Conversation Window Extension) for Lync. I wish to call javascript on the hosting page when my CWE gets loaded.
public MainPage()
{
try
{
HtmlPage.RegisterScriptableObject("MainPage", this);
HtmlPage.Window.Invoke("callmeonPageLoad");
}
catch (Exception ex)
{
MessageBox.Show(ex.Message + "|" + ex.InnerException);
}
}
callmeonPageLoad looks like this
function callmeonPageLoad() {
if (typeof jQuery == 'undefined') {
alert("jQuery is not loaded")
} else {
alert("jQuery is loaded")
}
}
If I run this app outside Lync jQuery gets loaded. Inside app it does not. So, I cannot call any jQuery function. This is valid only if I wish to call it when page is loading (calling from MainPage).
If I implement a button in Silverlight app and make it call same javascript. jQuery is loaded already an both cases.
My question is how to call javascript which contains jquery when app is loading.
Did more investigation and found out that even such page (set as CWE) do not load jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h1>jQuery</h1>
<div id="result"></div>
<script type="text/javascript">
alert(typeof jQuery);
</script>
</body>
</html>
Problem was related to jQuery location and version. It works with
<script type="text/javascript" src="Scripts/jquery-1.11.2.min.js"></script>
but does not
<script type="text/javascript" src="Scripts/jquery-2.1.3.min.js"></script>
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);