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>
Related
I've been struggling with this issue where in my cordova app, the back button will exit the app no matter what. I have tried all the solutions I've come across online but haven't had any success.
All the solutions I've tried (example below) have produced the same result.
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
// Handle the back button
}
The code inside my callback executes without issue, but after it executes, it exits the app. I can prevent the exit by including a ReferenceError in my function, for example
console.log(undefinedVar);
But this obviously doesn't seem like best practice.
The other solutions I've tried include using event.preventDefault() from the callback and ionic's registerBackButtonAction function.
Any suggestions would be greatly appreciated.
enter code here
<!DOCTYPE html>
<html>
<head>
<title>Stopping Back Button</title>
<link rel="stylesheet" type="tex`enter code here`t/css" href="style.css">
<script>
function getTitle() {
document.getElementById("ct").innerHTML = "DEMO: " + document.title;
}
</script>
<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);
getTitle();
}
// device APIs are available
//
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {
alert('Back Button Disabled');
console.log('Back Button Disabled');
}
</script>
</head>
<body onload="onLoad()">
<ul id="nav">
<li>← Back</li>
<li></li>
</ul>
</body>
</html>
I try to override the window.onload event inside an external javascript, but even when putting some basic console.log line outside the window.load function, the code seems to never execute.
Jumping to code here it is :
for index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Experimentation</title>
<script src="canvasEntry3D.js" type="type/javascript"></script>
</head>
<body>
<canvas id="canvas" height="720" width="1280"></canvas>
</body>
</html>
for canvasEntry3D.js :
console.log("slkdfnsdnflknegs");
window.onload = abcdefg;
function abcdefg() {
console.log("in start");
var canvas = document.getElementById("canvas");
}
To really know if the browser has loaded the correct javascript file, I have already checked the developper console.
And I'm not searching to override two times the window.onlad event, so there's no need to use addEventListeners (and there is also no other javascript code that override the window.onload event)
The only mistake in your code I see is the wrong type attribute within your script tag.
Just change it from
<script src="canvasEntry3D.js" type="type/javascript"></script>
to
<script src="canvasEntry3D.js" type="text/javascript"></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);
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
}
Scenario: You have a script that users can place on their website and when they click on it, it redirects to my website then calls a function only after they have successfully been redirected to my website and the function is part of my website, so there shouldn't be any problem with the same origin security policy.
So is the scenario possible?
EDIT
Ok now that I know that it can be done, I run into a pickle doing this.
function main(){
$(document).ready(function($){
window.location.href = 'http://www.example.com/michael';
theclient.chat();
});
}
I want theclient.chat() to be called after example.com/michael is loaded but it's not working.
UPDATE 2
function main(){
window.location.href = 'http://www.reflap.com/michaelnana';
$(document).ready(function(){
theclient.chat();
});
}
So will this work?
You have to call that function on your own site in the following block:
Source page:
function main(){
window.location.href = 'http://www.example.com/michael';
}
Target page (http://www.example.com/michael):
$(document).ready(function(){
theclient.chat();
});
To be clear: this will be called, if you type the URL of the page too and not only after a redirect.
You should add a URL parameter when you do the redirect, if you want to call it only after a redirect.
UPDATE:
You cannot call a function on the original page, after the redirect has been done.
On your target page, if you include the jQuery library, use this code:
$(document).ready(function(){
theclient.chat();
});
The ready() method makes sure the page (http://www.reflap.com/michaelnana) is rendered before running your JavaScript.
I've included 3 sample files that should serve as a skeleton for what you're trying to do.
www.external-site.com/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>3rd Party Page</title>
</head>
<body>
<script type="text/javascript"
src="http://www.example.com/michael/embed.js">
</script>
</body>
</html>
www.example.com/michael/embed.js
// load jQuery, keep it in our scope
// I'll not explain how this works but if you're making an embed
// script for other sites, you must make sure to encapsulate all
// your dependencies such as jQuery.
loadDependencies(function($) {
// document onload
$(function() {
// create a button that redirects to example.com/michael
var button = $('<a>').text('click me').click(function() {
window.location.href = 'http://www.example.com/micahel';
});
// insert that button after this script tag
var src = 'http://www.example.com/michael/embjed.js';
$('script[src="' + src + '"]').after(button);
});
});
www.example.com/michael/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Landing Page</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="theClient.js"></script>
<script type="text/javascript">
$(function() {
// all visitors to this page will trigger this call, not just
// the ones who came from the script embed. If you want to
// differentiate I'd recommened adding a query paremeter to
// the redirect and reading it there.
theClient.chat();
});
</script>
</head>
<body>
</body>
</html>