I am using PhoneGap 3.1, RequireJS, and Backbone.js for my project.
My problem is that navigator.camera.getPicture() is not working. If I place the navigator.camera.getPicture() function above the require() function it will work.
I added this block inside document.addEventListener('deviceready', success);
and added the deviceready listener inside requirejs. Both are not working. How can I fix this problem?
HTML
<script type="text/javascript" src="cordova.js"></script>
<script data-main="js/main.js" src="js/lib/require.js"></script>
main.js
requirejs(['backbone'], function (Backbone) {
navigator.camera.getPicture(function () {
console.log("SUUS");
}, function () {
console.log("ERRR");
}, {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL
});
Backbone.history.start();
}, false);
Related
I'm using cordova device plugin, and I have this in my main js:
$(document).ready(function(){
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(device) {
console.log(device);
}
}
For some reason, the result of the device object is:
{
bubbles: false,
cancelBubble: false,
cancelable: false,
clipboardData: undefined,
currentTarget: null,
defaultPrevented: false,
eventPhase: 0,
returnValue: true
//...
}
I just tried with an iPhone (I don't have an Android here) and have installed cordova plugin add cordova-plugin-device already, of course I have <script type="text/javascript" charset="utf-8" src="cordova.js"></script> in my html and even it has worked in the past.
Any suggestion of what can be happening?
Ok, I answer myself, I was stupid, just had to remove 'device' from the params so instead of
function onDeviceReady(device) {
console.log(device);
}
it is
function onDeviceReady() {
console.log(device);
}
I have made lots of research on this topic but I did not find an appropriate answer.
My problem is that when I use Cordova/Phonegap with JQM, the $(document).ready is fired but not the $(document).on('pageinit') which is recommanded to use with JQM.
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script>
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
deviceReadyDeferred.resolve();
}
$(document).on("mobileinit", function () {
jqmReadyDeferred.resolve();
});
$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);
function doWhenBothFrameworksLoaded() {
console.log('device ready');
$(document).on("pageinit",function(){
console.log("document pageinit fired");
}
}
</script>
<script src="js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="js/buttonset.js" type="text/javascript"></script>
This page is hosted on a remote server. In this case, device ready appears in the console but not document pageinit fired. If I replace $(document).on("pageinit",function(){ by $(document).ready(function(){, both logs appear but I dislike this solution.
Could you please tell me where I got wrong ?
Thanks beforehand.
try this sequence of code in script tag.
/* Initialization of PhoneGap and jQM */
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
//initialize PhoneGap
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
}
//initialize jQM
$(document).on("mobileinit", function () {
//hack to fix android page transition flicking issue
if (navigator.userAgent.indexOf("Android") != -1){
$.extend( $.mobile , {
defaultPageTransition: 'none'
});
}
setCustomThemeAndOptions();
jqmReadyDeferred.resolve();
});
//When both PhoneGap and jQM are ready, initialize language setting
$.when(deviceReadyDeferred, jqmReadyDeferred).then(function(){
deviceDeferred = true;
});
Hi I have a small app that uses JQM and Sammy. I am using Sammy to load pages dynamically and appending to the body of my index.html. the problem is i dont see the JQM themes are getting applied and there are no errors in console as well.
Are there any reason for this. I do call the following
context.render('view/abc.template')
.appendTo(context.$element(),function(){
$(document).ready(function () {
$("#container").trigger('pagecreate');
});
});
Thanks
This is how I did it;
1) firstly I disabled my JQM routing like so in a file called plugins.js;
$(document).bind("mobileinit", function() {
/**
* check out http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/ for more details
*/
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
This code was loaded before I loaded JQM, like so;
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="js/vendor/sammy/sammy.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vendor/sammy/plugins/sammy.template.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js"></script>
Then my main.js function looks like this;
(function($) {
var app = $.sammy('#main', function() {
this.use('Template');
this.get('#/', function(context) {
context.load('/templates/index.template', function() {
$("#container").trigger('pagecreate');
}).appendTo(context.$element());
});
this.get('#/landing', function(context) {
context.load('/templates/landing.template', function() {
$("#container").trigger('pagecreate');
}).replace(context.$element());
});
});
$(function() {
app.run('#/');
});
})(jQuery);
I think you are not far off on your code snippet above. NB you have your $(document).ready function as a callback to appendTo, which does not take a callback. You will see mine is in load() which does
can you please tell me hoe to create text file in given given directory .I need write on that text file .and read the text from that text file.
I am able to create folder using this code .But i need to add text file inside the folder(newDir).
<!DOCTYPE html>
<html>
<head>
<title>Local File System Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, onFileSystemFail);
}
function onFileSystemSuccess(fileSystem) {
console.log(fileSystem.name);
var directoryEntry = fileSystem.root;
directoryEntry.getDirectory("newDir", {create: true, exclusive: false}, onDirectorySuccess, onDirectoryFail)
}
function onDirectorySuccess(parent) {
console.log(parent);
}
function onDirectoryFail(error) {
alert("Unable to create new directory: " + error.code);
}
function onFileSystemFail(evt) {
console.log(evt.target.error.code);
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Local File System</p>
</body>
</html>
The Cordova File API contains all the information you want.
The below code creates a directory, creates a file inside the directory and writes some sample text in the file.
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
// create dir
fileSystem.root.getFile("newDir", {
create: true,
exclusive: false
}, gotDirEntry, fail);
}
function () gotDirEntry(dirEntry) {
// create file
dirEntry.getFile("newFile.txt", {
create: true,
exclusive: false
}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
writer.onwrite = function (evt) {
console.log("write completed");
};
writer.write("some sample text");
writer.abort();
}
function fail(error) {
console.log(error.code);
}
</script>
I am suddenly getting a most unwelcome error on this page:
Error: $("#accordion").accordion is not a function
My jQuery code is as follows:
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h4", autoHeight: false, collapsible: true });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
// controls the sidebar navigation action
$('.interior #subContent > ul > li > a.drop').click(function(){
$(this).parent().children('ul').toggle("slow");
return false;
});
$(window).ready(function() {
$('li.products ul').show();
$('li.technical ul').show();
$('li.tips ul').show();
});
});
</script>
I has worked for weeks and today...errors all the way.
I would appreciate any help in determining the cause of the error.
Thanks.
Found the problem:
This:
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
does not link to anything anymore.
The requested URL
/svn/tags/latest/ui/ui.accordion.js
was not found on this server.