I have some mysterious behaviour with my javascript code in my cordova android app. The javascript execution becomes anyhow not right executed. The intervals,conditions, timeouts and clearTimeout gets manipulated I think. You can see a demo here In my browser without the phonegap ready all works well. What can cause this behaiviour I have not only with these app.
index.js file
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
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;');
console.log('Received Event: ' + id);
}
};
app.initialize();
index.html
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Einstellungen zur Defintion als WebApp -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="ui-content" id="bak" style="width:100%;height:100%;position: absolute;">
<div class="header1">
<p class="score" style="white-space: normal" id="score"></p>
</div>
<p class="go" style="white-space: normal" id="number"></p>
</div>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function gameplay() {
window.location.href='main1.html';
}
function onDeviceReady() {
here is the js code you can see in the fiddle
}
</script>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
Related
I have to buttons on a page and I want nortification appear on buttons click. But nothing happens.
I added document.getElementByClassName... and buttonController functions. But nortification not working on buttons click.
UPDATE: I tried to add
<script src="js/index.js"></script> before link, but nothing changed.
Here is HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Button Test</title>
</head>
<body>
<button type="button" class="btn">Click Me!</button>
<button type="button" class="btn">Click Me too!</button>
</body>
</html>
Here is JavaScript:
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
document.getElementByClassName("btn").addEventListener("click", buttonController());
},
onDeviceReady: function() {
this.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
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;');
console.log('Received Event: ' + id);
}
alertDismissed: function () {
}
buttonController: function () {
navigator.notification.alert(
'Button Pressed!', // message
alertDismissed, // callback
'Title', // title
'Button Name' // buttonName
);
}
};
app.initialize();
this works fine
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.6.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
// Empty
}
// alert dialog dismissed
function alertDismissed() {
// do something
}
// Show a custom alert
//
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
alertDismissed, // callback
'Game Over', // title
'Done' // buttonName
);
}
</script>
</head>
<body>
<p>Show Alert</p>
</body>
</html>
I want to develop a cordova app with multiple views using a single page with the aid of handlebars javascript library. I created a simple app with phonegap as a start under the name MyFirstApp and went to edit the index.html file under the www directory. But nothing shows when i run the app in internet browser. Anybody sees where i am doing it wrongly?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="mainpage">
<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="address-template" type="text/x-handlebars-template">
<p>You can find me in {{city}}. My address is {{number}} {{street}}.</p>
</script>
<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>
</div>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/handlebars-v4.0.2.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
index.js
var app = {
initialize: function() {
this.bindEvents();
},bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},onDeviceReady: function() {
// Grab the template script
var theTemplateScript = $("#address-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// Define our data object
var context={
"city": "London",
"street": "Baker Street",
"number": "221B"
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
}
};
Use this as your index.js:
var app = {
initialize: function() {
this.bindEvents();
},bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},onDeviceReady: function() {
// Grab the template script
var theTemplateScript = $("#address-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// Define our data object
var context={
"city": "London",
"street": "Baker Street",
"number": "221B"
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
}
};
I am fairly new to programming, and I am trying to build my very first phonegap app. I am trying to play some sounds which are located in my /www/sounds/ folder. However, when I am running index.html in my browser (chrome) I get the 'Uncaught ReferenceError: Media is not defined" error.
This is my HTML:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!--jQuery mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="files-list-page" data-role="page">
<header data-role="header">
<h1>Fragmenten</h1>
</header>
<div data-role="content">
<ul id="files-list" data-role="listview" data-autodividers="true" data-filter="false" data-split-icon="delete">
<audio id="fr1" src="sounds/5euros.mp3" type="audio/mp3" ></audio>
</ul>
<button id="btn1" class=ui-btn" onclick="playAudio('sounds/5euros.mp3')">Play</button>
</div>
<footer data-role="footer">
<h3 id="copyright-title">Soundboard</h3>
</footer>
</div>
</body>
And this is my JS:
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
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;');
console.log('Received Event: ' + id);
}
};
app.initialize();
// Play audio
//
function playAudio(url) {
// Play the audio file at url
var my_media = new Media(url,
// success callback
function () {
console.log("playAudio():Audio Success");
},
// error callback
function (err) {
console.log("playAudio():Audio Error: " + err);
}
);
// Play audio
my_media.play();
}
My config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.martijn.HuisbaasBob" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HuisbaasBob</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
</widget>
Any suggestions would be of great help, thanks in advance!
You need to add this lines in ur config.xml to get your plugin worked...
(in app/res/xml/config.xml)
<feature name="Media">
<param name="android-package" value="org.apache.cordova.media.AudioHandler" />
</feature>
"Uncaught ReferenceError: Media is not defined" mean your code couldn't able to recognize it... meaning "not configured"
I'm trying to print an alert with Cordova and it only works if I emulate my app with Ripple Chrome extension.
In my Samsung Galaxy S3, nothing happens when I click the button.
I'm using Cordova 3.6.3-0.2.13.
I've added to my project the following plugins:
org.apache.cordova.dialogs and
org.apache.cordova.vibration.
(if I type "cordova plugins ls" they both appear)
<html>
<head>
<script type="text/javascript" charset="utf-8">
function getInfo() {
navigator.notification.alert(
'Model: ' + device.model, // message
null, // callback
'Info', // title
'Ok' // buttonName
);
}
</script>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<button id="gobutton" type="button" onclick="getInfo()">CLICK ME</button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
While my index.js is:
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
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;');
console.log('Received Event: ' + id);
}
};
app.initialize();
Could you help me? Thanks in advance
Dawson's comment should work.
As you can see at the Cordova documentation page:
http://docs.phonegap.com/en/2.2.0/cordova_notification_notification.md.html#notification.alert
The code:
navigator.notification.alert
is AFTER loading the cordova library.
I am trying to develop a program using PhoneGap. I would like to scan and display the tag ID from a scanned card.
When the app is built and deployed through build.phonegap.com and comes into contact with a tag the device vibrates but nothing shown on screen. Can anyone tell me what I'm doing wrong?
function ready() {
function onNfc(nfcEvent) {
var tag = nfcEvent.tag;
var tagId = nfc.bytesToHexString(tag.id);
navigator.notification.alert(tagId);
var y=document.getElementById("rand");
y.innerHTML = tagId;
}
function win() {
console.log("Listening for NFC Tags");
}
function fail(error) {
alert("Error adding NFC listener");
}
nfc.addTagDiscoveredListener(onNfc, win, fail);
}
function init() {
document.addEventListener('deviceready', ready, false);
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Scan NFC</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" />
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-nfc-0.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
</head>
<body>
<p>Please scan NFC tag</p>
<p id="rand"></p>
</body>
</html>
I suppose that you main.js has the function init and so on.
well the only thing that you need is add after you file main.js the call to function init
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<script type="text/javascript"> init(); </script>