Can't Access Cordova plugin in Second page

Question

I want to include Camera plugin into my cordova app build for ios. so i used a sample from internet this is my code and its working

<html>
  <head>
    <title>Capture Photo</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="UTF-8" src="cordova_plugins.js"></script>
    <script type="text/javascript" charset="utf-8">
    var pictureSource;
    var destinationType; 
    document.addEventListener("deviceready",onDeviceReady,false);
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }
    function onPhotoDataSuccess(imageData) {
      var smallImage = document.getElementById('smallImage');
      smallImage.style.display = 'block';
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }

    function onPhotoURISuccess(imageURI) {
      var largeImage = document.getElementById('largeImage');
      largeImage.style.display = 'block';
      largeImage.src = imageURI;
    }

    function capturePhoto() {
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
        destinationType: destinationType.DATA_URL });
    }

    function capturePhotoEdit() {
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL });
    }
    function getPhoto(source) {
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }
    function onFail(message) {
      alert('Failed because: ' + message);
    }

    </script>
  </head>
  <body>
    <button onClick="capturePhoto();">Capture Photo</button> <br>
    <button onClick="capturePhotoEdit();">Capture Editable Photo</button> <br>
    <button onClick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
    <button onClick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
  </body>
</html>

But i have a lot of pages in my app. so i created more html pages . and give a href link to this page. I called this page url from another page but it didnt work out. i have added these cordova.js and script files into my index.html page. still i cant access camera. how could i solve this problem?? how can i access those plugins in page other than starting page???

guys please help me.. :) thanks in advance

Answer 1

The deviceready event fires only once when the application starts. You can safely access the navigator.camera without waiting for the event on your next pages. In fact your code will fail because pictureSource and destinationType will be undefined.

<script type="text/javascript" charset="utf-8">
var pictureSource = pictureSource=navigator.camera.PictureSourceType;
var destinationType = navigator.camera.DestinationType; 

function onPhotoDataSuccess(imageData) {
  var smallImage = document.getElementById('smallImage');
  smallImage.style.display = 'block';
  smallImage.src = "data:image/jpeg;base64," + imageData;
}

function onPhotoURISuccess(imageURI) {
  var largeImage = document.getElementById('largeImage');
  largeImage.style.display = 'block';
  largeImage.src = imageURI;
}

function capturePhoto() {
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
    destinationType: destinationType.DATA_URL });
}

function capturePhotoEdit() {
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
    destinationType: destinationType.DATA_URL });
}
function getPhoto(source) {
  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
    destinationType: destinationType.FILE_URI,
    sourceType: source });
}
function onFail(message) {
  alert('Failed because: ' + message);
}
</script>

If you're testing the application on an Android phone ADT bundle provides logcat for tracing JavaScript errors on the device.

Answer 2

Replace your camera cordova plugin file js with this one

var pictureSource;
var destinationType;
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    pictureSource = navigator.camera.PictureSourceType;
    destinationType = navigator.camera.DestinationType;
}

function onPhotoDataSuccess(imageData) {
    var smallImage = document.getElementById('smallImage');
    smallImage.style.display = 'block';
    smallImage.src = imageData;
}

function onPhotoURISuccess(imageURI) {
    var largeImage = document.getElementById('largeImage');
    largeImage.style.display = 'block';
    largeImage.src = imageURI;
}

function capturePhoto() {
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
        quality: 50,
        destinationType: destinationType.FILE_URI
    });
}

function capturePhotoEdit() {
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
        quality: 20,
        allowEdit: true,
        destinationType: destinationType.FILE_URI
    });
}

function getPhoto(source) {
    navigator.camera.getPicture(onPhotoURISuccess, onFail, {
        quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source
    });
}

function onFail(message) {
    alert('Failed because: ' + message);
}

Can't Access Cordova plugin in Second page

Question

2 answers

solution1
0 2014-03-27 08:51:56

solution2
0 2014-03-29 20:31:51

Can't Access Cordova plugin in Second page

Question

2 answers

solution1 0 2014-03-27 08:51:56

solution2 0 2014-03-29 20:31:51

solution1
0 2014-03-27 08:51:56

solution2
0 2014-03-29 20:31:51