im currently using PhoneGap and for some reason when i click a button, the function is undefined. iv tryed putting it inside the deviceReady function, as well as the document ready function, but neither seemed to make a difference.
I can't see what the problem is, if anyone can help that would be great.
My HTML:
<!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, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/libary.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.0.min.js"></script>
<title>Libary</title>
</head>
<body>
<div id="capture" class="wrapper" data-role="page">
<div data-role="header">
<h1>Libary</h1>
</div>
<div data-role="content" class="app">
<a href="#" data-role="button" onclick="retrievePicture();">Retrieve Photo</a>
<p id="pictureStatus"></p>
<div id="imagelocation">
<img id="capturedImage"></img>
</div>
</div>
</div>
</body>
</html>
My JavaScript/jQuery:
document.addEventListener("deviceready", onDeviceReady, false);
var platform;
function onDeviceReady() {
//Find out what platform the device is running
platform = device.platform;
//Camera Section
function retrievePicture() {
// Take a picture using device camera and retrieve image
//navigator.camera.getPicture(onCaptureSuccess, onCaptureFail, {Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY});
$('#pictureStatus').text("hello");
}
function onCaptureSuccess(imageData) {
$('#capturedImage').css("display", "block");
var imageLocation = imageData;
$('#capturedImage').attr("src", imageLocation);
$('#pictureStatus').text(imageLocation);
}
function onCaptureFail(message) {
$('#pictureStatus').text(message);
}
}
im currently using PhoneGap and for some reason when i click a button, the function is undefined. iv tryed putting it inside the deviceReady function, as well as the document ready function, but neither seemed to make a difference.
I can't see what the problem is, if anyone can help that would be great.
My HTML:
<!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, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/libary.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.0.min.js"></script>
<title>Libary</title>
</head>
<body>
<div id="capture" class="wrapper" data-role="page">
<div data-role="header">
<h1>Libary</h1>
</div>
<div data-role="content" class="app">
<a href="#" data-role="button" onclick="retrievePicture();">Retrieve Photo</a>
<p id="pictureStatus"></p>
<div id="imagelocation">
<img id="capturedImage"></img>
</div>
</div>
</div>
</body>
</html>
My JavaScript/jQuery:
document.addEventListener("deviceready", onDeviceReady, false);
var platform;
function onDeviceReady() {
//Find out what platform the device is running
platform = device.platform;
//Camera Section
function retrievePicture() {
// Take a picture using device camera and retrieve image
//navigator.camera.getPicture(onCaptureSuccess, onCaptureFail, {Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY});
$('#pictureStatus').text("hello");
}
function onCaptureSuccess(imageData) {
$('#capturedImage').css("display", "block");
var imageLocation = imageData;
$('#capturedImage').attr("src", imageLocation);
$('#pictureStatus').text(imageLocation);
}
function onCaptureFail(message) {
$('#pictureStatus').text(message);
}
}
-
1
Consider using HTML5 tags and attributes when using HTML5 doctype.
type="text/javascript"for example, is not needed in HTML5. And a character set can be defined much shorter like this:<meta charset="utf-8">– Robin van Baalen Commented Mar 26, 2013 at 12:38
1 Answer
Reset to default 3Please don't define functions inside functions like that. Remove your retrievePicture() from inside the onDeviceReady() function and it should work fine.
As mentioned by @Robin van Baalen, this may be an interesting and relevant read - What you need to know about Javascript scoping.
Also, Functions and function scope.