I’ve I’ve read a few similar posts on here without success. What I want to do is simple. I have a very small jquery mobile app, wrapped up in phonegap. On a certain page I want to be able to access the devices camera (lets say on an iPhone). I’m using code from the phonegap camera docs
The code itself works correctly if I dont use jquery mobile, however I want to use JQM to style the app.
I know JQM uses ajax to call pages and has its own pageinit() and pageshow() functions. How can I get both phonegap and JQM to play nice togerther as both need to fire their own functions (deviceReady() and JQM was of initalizing pages).
If it helps this is my code of the camera page:
<!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;" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.1.css" />
<title>Take Picture</title>
</head>
<body>
<div id="takePicturePage" data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed" id="hrdHome" data-theme="b">
<h1>Take a picture</h1>
</div><!-- /header -->
<div data-role="content" id="content">
<button onclick="capturePhoto();">Capture Photo</button>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</div><!-- /content -->
</div>
<script type="text/javascript" src="cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.1.js"></script>
<script type="text/javascript" src="js/takePicture.js"></script>
</body>
</html>
And this is my takePicture.js:
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// PhoneGap is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64 encoded image data
// console.log(imageData);
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
}
// A button will call this function
//
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true });
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
Please could someone help as I cant see how the two can work togerther?
Many thanks in advance
Just incase its any use to anyone out there I ended up using this cordova-jquerymobile-boilerplate which works a treat and solved all my issues.