document.addEventListener("ondeviceready", function(){ alert("123");},true);
document.addEventListener("backbutton", function(){ alert("123");},true);
// I also used function separately but not worked
// I am using the correct cordova library
// I kept this code in external js file then also its not worked.
// I also called it before including any other js file into the HTML
// same thing also happening for 'backbutton' event
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=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/common.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.min.css.css" />
<title>Since your car is manufactured before 2000</title>
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript">
document.addEventListener("backbutton", function(){
alert("Back button pressed");
},true);
</script>
</head>
<body>
The event is called deviceready, not ondeviceready.
Also, you need the register the backbutton event after the deviceready-event has fired, otherwise, it will not work.
Modified example from the Cordova docs:
<!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() {
document.addEventListener("backbutton", onBackButton, false);
}
function onBackButton(){
// your code here
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
Related
Trying to display an existing web page in a phonegap app. It seems like this was a big topic in 2014 but none of those answers seem to apply now.
Here is what I've done in index.html. It works in a web browser but not in the app. Has anyone worked this out? Maybe I am missing a permission somewhere?
<!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>Blank App</title>
</head>
<body onload="window.location.href='http://www.google.com'">
<script type="text/javascript" src="cordova.js"></script>
<p>hello</p>
</body>
</html>
This also works in browser but not in phonegap...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Refresh" content="0; url=https://www.google.com" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Broken</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
This also does not work...
<!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>Broken</title>
</head>
<body>
HELLO
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
Here it is, cost me $100 on upwork. I hope it saves somebody some headache!
<!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>Broken</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var ref = cordova.InAppBrowser.open('https://google.com', '_blank', 'location=no');
}
</script>
</body>
</html>
I have develop the canvas image to store the gallery.I have add the plugins from
**cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git**
I have write the signature in the device, But unable to save in the gallery.
Here following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/modernizr.custom.34982.js"></script>
<script type="text/javascript" src="js/signatureCapture.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript">
var sigCapture;
$(document).ready(function(e)
{
sigCapture = new SignatureCapture( "signature" );
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log("Save =========>"+msg);
},
function(err){
console.log("Error =====>"+err);
},
document.getElementById('signature')
);
}
$("#submit").click( onSubmitClick );
$("#cancel").click( onCancelClick );
});
function onSubmitClick(event ) { }
function onCancelClick( event ) {
sigCapture.clear();
}
</script>
</head>
<body>
<h2>SIGNATURE</h2>
<div id="canvasContainer" >
<canvas id="signature" />
</div>
<button data-role="button" id="submit" data-theme="b">Save</button>
<button data-role="button" id="cancel" data-theme="b">Cancel</button>
</body>
</html>
Error console :
The image could not be decoded at file:///android_asset/www/index.html:55
please some one can help me how to save the canvas text in image gallery.
I am using this websocket programming from here.https://github.com/knowledgecode/WebSocket-for-Android.But after following the steps i am getting this error.I am using cordova 2.7 .can you please tell me how to sove this prolem
Uncaught TypeError: Object #<Object> has no method 'exec' at file:///android_asset/www/js/webSocket.js:51
here is my html file..
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=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" />
<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>
</div>
<script type="text/javascript" src="cordova.js"></script>
<!--script type="text/javascript" src="js/webSocket.min.js"></script-->
<script type="text/javascript" src="js/webSocket.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
var ws = new plugins.WebSocket('ws://192.168.1.102/8101');
// onopen callback
ws.onopen = function () {
console.log('onopen');
this.send('hello');
};
// onmessage callback
ws.onmessage = function (data) {
// The data is received text
console.log(data); // hello
this.close();
};
// onerror callback
ws.onerror = function (message) {
// The message is the reason of error
console.log(message);
};
// onclose callback
ws.onclose = function (code) {
// The code is the reason code of disconnection
console.log(code); // 1000
};
// app.initialize();
</script>
</body>
</html>
One possibility is that one of your libraries (cordova.js, webSocket.js) is extending Object.prototype, and the other is using Objects as hash tables without checking hasOwnProperty(). If that's the case, you'll need to find a replacement for one of the libraries or roll your own. See this related question.
I am using jQueryMobile and PhoneGap to develop a cross platform mobile app. I am binding to the first page that is loaded in the app (the 'home' page) but the pageinit event does not fire. Here's my custom javascript:
$('#home').live('pageinit', function()
{
alert('firing pageinit');
}
Here's my index.html file with the page definition:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/custom.css" />
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
Refresh
<h1>MyListingsApp</h1>
Add
</div>
<div data-role="content">
<ul data-role="listview" id="listings" data-filter="true" data-filter-placeholder="Filter listings...">
<li id="hit_to_begin"></li>
</ul>
</div>
</div>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.ui.map.full.min.js"></script>
<script src="js/jquery.ui.map.services.min.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
The event does not fire and all I get is the loaded homepage. According to the jQueryMobile docs this is proper binding to handle customization on page initialization.
Look at this example: http://jsfiddle.net/Gajotres/BGkaq/, I made you 2 examples, you can find them at the bottom of the page.
Event binding example 1:
// in (url^=home) home is a page id
$(':jqmData(url^=home)').live('pagebeforecreate',function (event) {
alert('Event has been triggered!');
});
Event binding example 2:
$('#home').live('pagebeforecreate',function (event) {
alert('Event has been triggered!');
});
I am trying to build a web app for Android device using Senahc Touch and display a splash screen. I was using the Sencha framework which has a Ext.Setup property that you can specify the iPhone splashscreen. I've stopped trying to get this parameter to work and am now just trying to use standard HTML5 meta tags to load the splash screen. Has anyone ever managed to get the Android splash scren displayed either in a basic HTML5 app or a fullyblown Sencha app?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" href="TSplash.gif" />
<script src="sencha-touch.js" type="text/javascript"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen : true,
html : 'Hello World_7!'
});
}
});
</script>
</head>
<body></body>
</html>
One way is to add a background image to the body of your html. You see it on startup for a moment before your activity's js kicks in:
<HTML>
<head>
<title>Contacts</title>
<script type="text/javascript" src="sencha-touch.js"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<link href="app/app.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="0000" style="background-image: url(TSplash.gif);"></body>
</HTML>