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.
Related
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>
I want to display json data from servlet in listview of android phonegap. But it is displaying blank page in android emulator. It is not calling servlet also. Here is my code please help me.
<!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>Auth Demo</title>
<link rel="stylesheet" href="jquery.mobile-1.3.2.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="jquery-1.9.1.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
<script>
$.ajax({
url: 'http://10.0.2.2:7080/example/CaseList',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i, item) {
$('ul').append('<li>' + item.case + '</li>');
});
$('#output').listview("refresh");
},
error: function(){
output.text('There was an error loading the data.');
}
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<ul data-role="listview" data-filter="false" id="output" data-theme="d">
</ul>
</div>
</div>
</body>
</html>
I am not 100% up on ajax calls but I am pretty sure you need to actually call the function after you define it and it doesn't look like you are.
Try putting an onload call in your tag and then wrapping your ajax in a function.
Body tag:
<body onload="getData()">
Function:
function getData(){
//place your ajax call in here
}
I'm a newbie. I want to save a value inputted by the user in the preferences manager, and have it automatically populate a field(if it has been filled by the user). I get a "ReferenceError: Can't find variable: $ at file:///android_asset/www/index.html:53" in my Android logcat. Also my app crashes. What am I doing wrong?
<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" />-->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.2.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.2.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css" />
<title>Hello World</title>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
//once the device ready event fires up, you can safely do your thing
function onDeviceReady(){
//document.getElementById("welcomeMsg").innerHTML += "Phonegap is ready! version=";
}
$(function(){
$('#savebutton').click(function(){
//this is where the user manually keys in values, do error checking here
window.localStorage.setItem("user_lat", $('#user_lat').val());
});
//called when the page is being shown
$('#newpage').live('pageshow', function(){
var userLat = window.localStorage.getItem("user_lat");
if (userLat.length > 0){
$('#user_lat').val(userLat);
}
});
});
</script>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
Hola Phonegap & Jquery mobile!
Go to new page
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer</h4>
</div>
</div>
<!--2nd page-->
<div id="newpage" data-role="page">
<div data-role="header">
<h1>Manually specify your GPS coordinates</h1>
</div>
<div data-role="content">
<label for= "user_lat">Latitude:</label>
<input type="text" name="user_lat" id="user_lat" value=""/>
<a id ="savebutton" href="" data-role="button">Save</a>
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer</h4>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
</body>
If '$' isn't defined I don't think that jQuery is being loaded correctly..
Try:
if ( $.mobile ) {
// loaded
} else {
// not loaded
}
to check if jQuery mobile is loaded, or try this for normal jQuery:
if (!jQuery) {
alert("jQuery is not loaded");
}
You need to include jQuery in your page in order to use $ (jQuery) which you did not. You can add the script tag and give the url of jquery in src attribute. Add this tag in head tag so that it is added before it is required.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
In the following code i am trying to print and insert an element from javascript to the android emulator.I do not see the text hello world again..What am i doing wrong here..
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/fonts/font.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script>
goLogin();
</script>
</head>
<body>
<div id="medn_content" class="medn_content" data-role="page" >
</div>
</body>
</html>
index.js
function goLogin(htm)
{
alert('here');
$("#medn_content").appendTo("<p> hello world again</p>");
}
Working example: http://jsfiddle.net/Gajotres/rrSdV/
You have an error in your code, this:
function goLogin(htm)
{
alert('here');
$("#medn_content").appendTo("<p> hello world again</p>");
}
should be this:
function goLogin(htm)
{
alert('here');
$("#medn_content").append("<p> hello world again</p>");
}
Basically change appendTo to append. There's a big difference how those functions work.
Also if you are using jQuery Mobile they you need to append new content after the page is loaded into the DOM. for that you will need to use proper jQuery Mobile page events. your code should look like this:
<script>
$(document).on('pagebeforeshow', '#medn_content', function(){
goLogin();
});
</script>
If you want to find out more about jQuery Mobile page events and how they work take a look at this ARTICLE or find it HERE.
In the end your code should look like this:
HTML:
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/fonts/font.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script>
$(document).on('pagebeforeshow', '#medn_content', function(){
goLogin();
});
</script>
</head>
<body>
<div id="medn_content" class="medn_content" data-role="page" >
</div>
</body>
</html>
Javascript:
function goLogin(htm)
{
alert('here');
$("#medn_content").append("<p> hello world again</p>");
}
Use this script tag instead:
<script>
$( function() {
document.addEventListener("deviceready", goLogin, false);
});
function goLogin(htm)
{
alert('here');
$("#medn_content").appendTo("<p> hello world again</p>");
}
</script>
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!');
});