i have some code using jquery mobile + phonegap and run it on my android, i want to redirect the page to div id content… i mean after i take a picture i’d like to load the next page… here is my code…
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="js/jquery.mobile-1.0.min.css" />
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8">
var deviceReady = false;
/**
* Take picture with camera
*/
function takePicture() {
navigator.camera.getPicture(
function (uri) {
var img = document.getElementById('camera_image');
img.style.visibility = "visible";
img.style.display = "block";
img.src = uri;
document.getElementById('camera_status').innerHTML = "Success";
window.location.href = "#page2";
}, function (e) {
console.log("Error getting picture: " + e);
document.getElementById('camera_status').innerHTML = "Error getting picture.";
}, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI
});
};
/**
* Select picture from library
*/
function selectPicture() {
navigator.camera.getPicture(
function (uri) {
var img = document.getElementById('camera_image');
img.style.visibility = "visible";
img.style.display = "block";
img.src = uri;
document.getElementById('camera_status').innerHTML = "Success";
window.location.href = "#page2";
}, function (e) {
console.log("Error getting picture: " + e);
document.getElementById('camera_status').innerHTML = "Error getting picture.";
}, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
});
};
/**
* Upload current picture
*/
function uploadPicture() {
// Get URI of picture to upload
var img = document.getElementById('camera_image');
var imageURI = img.src;
if (!imageURI || (img.style.display == "none")) {
document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first.";
return;
}
// Verify server has been entered
server = document.getElementById('serverUrl').value;
if (server) {
// Specify transfer options
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
options.chunkedMode = false;
// Transfer picture to server
var ft = new FileTransfer();
ft.upload(imageURI, server, function (r) {
document.getElementById('camera_status').innerHTML = "Upload successful: " + r.bytesSent + " bytes uploaded.";
}, function (error) {
document.getElementById('camera_status').innerHTML = "Upload failed: Code = " + error.code;
}, options);
}
}
/**
* View pictures uploaded to the server
*/
function viewUploadedPictures() {
// Get server URL
server = document.getElementById('serverUrl').value;
if (server) {
// Get HTML that lists all pictures on server using XHR
var xmlhttp = new XMLHttpRequest();
// Callback function when XMLHttpRequest is ready
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4) {
// HTML is returned, which has pictures to display
if (xmlhttp.status === 200) {
document.getElementById('server_images').innerHTML = xmlhttp.responseText;
}
// If error
else {
document.getElementById('server_images').innerHTML = "Error retrieving pictures from server.";
}
}
};
xmlhttp.open("GET", server, true);
xmlhttp.send();
}
}
/**
* Function called when page has finished loading.
*/
function init() {
document.addEventListener("deviceready", function () {
deviceReady = true;
}, false);
window.setTimeout(function () {
if (!deviceReady) {
alert("Error: PhoneGap did not initialize. Demo will not run correctly.");
}
}, 2000);
}
</script>
</head>
<body onload="init();">
<!-- Page 1 -->
<div data-role="page" id="page1">
<!-- Page 1 Header -->
<div data-role="header">
<h1>Ambil Gambar</h1>
</div>
<!-- Page 1 Content -->
<div data-role="content">
<center>
<a href="javascript:void(0)" onclick="takePicture();">
<img src="image/camera.png" width="150px" height="150px"></a>
<br>
<br>
<b>Atau</b>
<br>
<br>
<a href="javascript:void(0)" onclick="selectPicture();">
<img src="image/upload.png"></a>
<p>Find my friend Page 3
<a href="#page2">here</a>
</p>
</center>
</div>
<!-- Page 1 Footer -->
<div data-role="footer">
<h4>Footer 1</h4>
</div>
</div>
<!-- Page 2 -->
<div data-role="page" id="page2">
<!-- Page 2 Header -->
<div data-role="header">
<h1>Header 2</h1>
</div>
<!-- Page 2 Content -->
<div data-role="content">
<img style="width:100%;visibility:hidden;display:none;" id="camera_image" src="" />
<p>Find my friend Page 3
<a href="#page3">here</a>
</p>
</div>
<!-- Page 2 Footer -->
<div data-role="footer">
<h4>Footer 2</h4>
</div>
</div>
<!-- Page 3 -->
<div data-role="page" id="page3">
<!-- Page 3 Header -->
<div data-role="header">
<h1>Header 3</h1>
</div>
<!-- Page 3 Content -->
<div data-role="content">
<h3>Server:</h3>
<b>Images on server:</b>
<div id="server_images"></div>
<input type="button" onclick="uploadPicture();" value="Upload Picture" />
<input type="button" onclick="viewUploadedPictures();" value="View Uploaded Pictures" />
</div>
</div>
</body>
</html>
Can anyone help me please? thanks before…
Instead of window.location.href use window.location.hash.