StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPhoneGap for android- Camera API .. Not working with Jquery mobile
primarykey
Id
11971371
data
AcceptedAnswerId
0
AnswerCount
5
ClosedDate
CommentCount
1
CommunityOwnedDate
CreationDate
2012-08-15T14:39:09.637
FavoriteCount
1
LastActivityDate
2014-08-04T08:47:28.813
LastEditDate
2012-08-15T15:18:00.400
LastEditorUserId
1600819
OwnerUserId
1600819
ParentId
0
PostTypeId
1
Score
1
ViewCount
9776
LastEditorDisplayName
text
Body
<p>I am new learner with Phonegap and JqueryMobile. I have made separate project in eclipse with just phonegap Camera API code. Its working fine in emulator. But when I integrate same code in another project with Jquery mobile, it is throwing exception <strong>(Uncaught TypeError: Cannot read property 'PNG' of undefined at file:///android_asset/www/index.html:347)</strong>. Without this camera api code is working fine.</p> <p><strong>(1) Working code- just phonegap</strong> </p> <pre><code><!DOCTYPE html> <html> <head> <title>Capture Photo</title> <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> <script type="text/javascript" charset="utf-8"> var pictureSource; // picture source var destinationType; // sets the format of returned value var encodingType; // 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() { console.log("onDeviceReady"); pictureSource=navigator.camera.PictureSourceType; console.log("onDeviceReady1"); destinationType=navigator.camera.DestinationType; console.log("onDeviceReady2"); encodingType=navigator.camera.EncodingType; } // Called when a photo is successfully retrieved // function onPhotoDataSuccess(imageData) { // Uncomment to view the base64 encoded image data console.log(imageData); var re = /\?(\d*)$/; imageData=imageData.replace(re, ""); alert("imageData is "+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); // alert("uri is "+imageURI); var re = /\?(\d*)$/; imageURI=imageURI.replace(re, ""); alert("imageURI is "+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: 100, targetWidth: -1, targetHeight: -1, encodingType:encodingType.PNG }); } // 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: 100, allowEdit: true, targetWidth: -1, targetHeight: -1 ,encodingType:encodingType.PNG, }); } // A button will call this function // function getPhoto(source) { // Retrieve image file location from specified source navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 100, targetWidth: -1, targetHeight: -1 , destinationType: destinationType.FILE_URI,encodingType:PNG, sourceType: source }); } // Called if something bad happens. // 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="width:60px;height:60px;" id="smallImage" src="a.png" /> <img style="" id="largeImage" src="a.png" /> </body> </html> </code></pre> <p><strong>(2) Not Working code- jquerymobile + phonegap</strong> </p> <pre><code> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title> </title> <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" /> <link rel="stylesheet" href="my.css" /> <style> /* App custom styles */ </style> <script src="jquery.min.js"> <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> <script type="text/javascript" charset="utf-8"> var pictureSource; // picture source var destinationType; // sets the format of returned value var encodingType; // 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() { console.log("onDeviceReady"); pictureSource=navigator.camera.PictureSourceType; console.log("onDeviceReady1"); destinationType=navigator.camera.DestinationType; console.log("onDeviceReady2"); encodingType=navigator.camera.EncodingType; } // Called when a photo is successfully retrieved // function onPhotoDataSuccess(imageData) { // Uncomment to view the base64 encoded image data console.log(imageData); var re = /\?(\d*)$/; imageData=imageData.replace(re, ""); alert("imageData is "+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); // alert("uri is "+imageURI); var re = /\?(\d*)$/; imageURI=imageURI.replace(re, ""); alert("imageURI is "+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: 100, targetWidth: -1, targetHeight: -1, encodingType:encodingType.PNG }); } // 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:50, destinationType:Camera.DestinationType.DATA_URL }); } // A button will call this function // function getPhoto(source) { // Retrieve image file location from specified source navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 100, targetWidth: -1, targetHeight: -1 , destinationType: destinationType.FILE_URI,encodingType:PNG, sourceType: source }); } // Called if something bad happens. // function onFail(message) { alert('Failed because: ' + message); } </script> <script src="jquery.mobile-1.1.1.min.js"> </script> <script src="my.js"> </script> <script src="local.js"> </script> <script src="jqm.autoComplete.min-1.4.2.js"> </script> <script src="camera.js"></script> </head> <body>  <div data-role="page" id="page1"> <script> var Countrydata=''; $("#page1").bind("pageshow", function(e) { var myXML = "" var availableTags = ""; var request = new XMLHttpRequest(); request.open("GET", "Countries.xml", true); request.onreadystatechange = function(){ if (request.readyState == 4) { if (request.status == 200 || request.status == 0) { myXML = request.responseXML; parseXml(myXML); } } } request.send(); function parseXml(xml) { $(xml).find('Country').each(function(){ if(Countrydata !='') { Countrydata += ','; } Countrydata += $(this).text(); }); availableTags = Countrydata; } availableTags = ['India']; $("#searchinput1").autocomplete({ target: $('#suggestions'), source: availableTags, minLength: 1, matchFromStart: false, callback: function(e) { var $a = $(e.currentTarget); // access the selected item $('#searchinput1').val($a.text()); // place the value of the selection into the search box $("#searchinput1").autocomplete('clear'); // clear the listview } }); }); </script> <div data-theme="b" data-role="header"> <h2> Nalco Water Savings Unit </h2> </div> <div data-role="content" style="padding: 15px" data-theme="b"> <div data-role="navbar" data-iconpos="right"> <ul> <li> <a href="#" data-icon="arrow-r" > Customer Info </a> </li> <li> <a href="#page2" data-icon="arrow-r"> Additional Details </a> </li> <li> <a href="#page3" data-icon="info"> Summary </a> </li> </ul> </div> <div data-role="collapsible-set" data-content-theme="b"> <div data-role="collapsible" data-collapsed="false"> <h3> Company details </h3> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-mini="true"> <label for="textinput3"> Company number </label> <input name="txtCompNumber" id="textinput3" placeholder="" value="" type="text" /> </fieldset> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-mini="true"> <label for="textinput4"> Company Address </label> <input name="txtCompAddr" id="textinput4" placeholder="" value="" type="text" /> </fieldset> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-mini="true"> <label for="textinput5"> City </label> <input name="txtCity" id="textinput5" placeholder="" value="" type="text" /> </fieldset> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-mini="true"> <label for="searchinput1"> Country </label> <input id="searchinput1" placeholder="...Serach for country" type="text" /> <ul id="suggestions" data-role="listview" data-inset="true"></ul> </fieldset> </div> </div> <div data-role="collapsible" data-collapsed="true"> <h3> Customer Name </h3> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-mini="true"> <label for="textinput1"> Customer Name </label> <input name="txtCustName" id="textinput1" placeholder="" value="" type="text" /> </fieldset> </div> </div> <div data-role="collapsible" data-collapsed="true"> <h3> Sales Engineer Details </h3> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-mini="true"> <label for="textinput6"> Sales Engineer Name </label> <input name="txtSalesEngName" id="textinput6" placeholder="" value="" type="text" /> </fieldset> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-mini="true"> <label for="textinput7"> Sales Engineer Phone No. </label> <input name="txtSalesEngPhone" id="textinput7" placeholder="" value="" type="tel" /> </fieldset> </div> </div> </div> <a data-role="button" data-inline="true" data-rel="back" data-transition="fade" href="#page2"> Proceed </a> </div> </div> <div data-role="page" id="page2" data-theme="b"> <div data-role="header"> <h2> Nalco Water Savings Unit </h2> </div> <div data-role="content" style="padding: 15px"> <div data-role="navbar" data-iconpos="right"> <ul> <li> <a href="#page1" data-icon="arrow-r" class="ui-btn-active ui-state-persist"> Customer Info </a> </li> <li> <a href="#" data-icon="arrow-r"> Additional Details </a> </li> <li> <a href="#page3" data-icon="info"> Summary </a> </li> </ul> </div> <h2> <b> What additional installation costs have been identified? </b> </h2> <fieldset data-role="controlgroup" data-mini="true" > <div class="ui-grid-b" id="gridAddCost"> <div class="ui-block-a"> <h3><b>Description</b></h3> </div> <div class="ui-block-b" > <h3><b>Cost</b></h3> </div> <div class="ui-block-c" > </div> <div class="ui-block-a"> <input name="txt1" id="textinput5" placeholder="" value="" type="text" /> </div> <div class="ui-block-b"> <input name="txt2" id="textinput5" placeholder="" value="" type="text" /> </div> <div class="ui-block-c" > </div> <div class="ui-block-a"> <input name="txt3" id="textinput5" placeholder="" value="" type="text" /> </div> <div class="ui-block-b"> <input name="txt4" id="textinput5" placeholder="" value="" type="text" /> </div> <div class="ui-block-c" > </div> <div class="ui-block-a"> <input name="txt5" id="textinput5" placeholder="" value="" type="text" /> </div> <div class="ui-block-b"> <input name="txt6" id="textinput5" placeholder="" value="" type="text" /> </div> <div class="ui-block-c" > </div> </div> <input id="btnAddDesc" type="button" value="Add installation" /> </fieldset> <a data-role="button" data-inline="true" data-rel="back" data-transition="fade" href="#page3"> Proceed </a> </div> </div> <div data-role="page" id="page3" data-theme="b"> <div data-role="header"> <h2> Nalco Water Savings Unit </h2> </div> <div data-role="content" style="padding: 15px"> <div data-role="content"> <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="width:60px;height:60px;" id="smallImage" src="a.png" /> <img style="" id="largeImage" src="a.png" /> </div> <div data-role="navbar" data-iconpos="right"> <ul> <li> <a href="#page1" data-icon="arrow-r" class="ui-btn-active ui-state-persist"> Customer Info </a> </li> <li> <a href="#page2" data-icon="arrow-r"> Additional Details </a> </li> <li> <a href="#" data-icon="info"> Summary </a> </li> </ul> </div> <a data-role="button" data-inline="true" data-rel="back" data-transition="fade" href="#page1"> Proceed </a> </div> </div> <script> //App custom javascript </script> </body> </html> </code></pre>
Tags
<android><jquery-mobile><cordova>
Title
PhoneGap for android- Camera API .. Not working with Jquery mobile
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USuser1600819
UserOwnerUserId
1. USuser1600819
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POPhoneGap for android- Camera API .. Not working with Jquery mobile
  UserUserId
  USreinhard.lee
  VoteTypeVoteTypeId
  VTFavorite
2. VO
  singulars
  PostPostId
  POPhoneGap for android- Camera API .. Not working with Jquery mobile
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.