I am having issues, it would seem, with using local files with my phonegap application. I am trying get a simple app up and running to scan a qr code and just display the text that was scanned. However, it is not working for some reason. I can run any JavaScript I want as long as it is in the index.html file. For some reason, whenever I try to call a function from an included js file, I get a reference error. In this code I am getting 'ReferenceError: scan_qr_code is not defined' and 'ReferenceError: onDeviceReady is not defined'. Both of these functions are from the main.js file which is supposed to be included from the index.html file. I downloaded and inspected the apk file and these files are being included in the build but for some reason are not working. Anyone have any suggestions or advice? This is driving me nuts. Seems like this should be a rather straight forward thing. Also, I'm building with the PhoneGap version as 3.7.0
I am using PhoneGap build for compiling and my folder structure is setup as thus.
/www
/scripts
main.js
jquery-1.11.3.min.js
/styles
main.css
index.html
config.xml
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="childbrowser.js"></script>
<script type="text/javascript" src="scripts/barcode.js"></script>
<link href="styles/main.css" rel="stylesheet" />
<title> </title>
<script>
$(function(){
alert('here');
try{
$("#scan_button").click(function(){
alert('Button Clicked 2');
try{
onDeviceReady();
scan_qr_code();
}catch(e){
alert(e);
}
});
}catch(e){
alert(e);
}
});
document.addEventListener("deviceready", function(){
try{
$("#scan_button").click(function(){
alert('Button Clicked');
try{
scan_qr_code();
}catch(e){
alert(e);
}
});
scan_qr_code();
}catch(e){
alert(e);
}
}, false);
</script>
</head>
<body>
<button id="scan_button">Scan QR Code</button>
</body>
</html>
main.js
$(function(){
});
function onDeviceReady(){
alert('Device Ready Fired');
}
function scan_qr_code(){
try{
alert('Scanning');
// Scan the QR code
barcode_app.scan(function(result){
code = result.text;
// Just grab the text from the scanned code
alert(code);
scan_qr_code(){
});
}catch(e){
alert(e);
}
}
config.xml
<preference name="phonegap-version" value="3.7.0" />
<access origin="*"/>
This is going to be a very wild guess, but it look like your main.js file has an extra { that shouldn't be there.
scan_qr_code(){
This could be breaking your code, and that's why your functions from main.js are undefined.
Here's a plunker showing that the code would run just fine if you remove the extra {. Well... barcode_app is now showing as undefined, I assume it's part of the scripts/barcode.js file, which by the way, is not included in your project structure either.
Related
I tried openCVjs tutorial in my local and everytime I load it I get error on console
What I have tried ?
Loading without a file server, because the openCV.js library is around 11mb. So thought that could be an issue.
Loaded with simpleHTTPserver using python even then I got the same error. Attached below screenshot of the network requests.
Please note that test.js resides in the same path as that of openCV.js but test.js works because I tried console.log from it.
You should load opencv.js asynchronously.
Add this into your index.html
<script>
function onOpenCvReady() {
console.log( 'OpenCV Ready', cv);
}
</script>
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript">
</script>
In my case, it only works when the onOpenCvReady() function is declarated in an HTML page.
When the function is loaded from an external test.js file, I have to refresh the index page two times, then it suddenly works without any errors.
I embedded it into my HTML page like this:
<p id="status">OpenCV.js is loading...</p>
<!-- <script async src="js/main.js" type="text/javascript"></script> -->
<script async src="js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
<script>
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
I am playing around with an html template and I have noticed that the developer doesn't use RequireJS or anything else to require and call different functions from other node files. Instead, they used this in the html file to initialise and call the function:
<script src="../../assets.js/test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test.initSomeFunction();
});
</script>
And I've got the below code in assets/js/test.js which defines initSomeFunction in javascript:
test = {
initSomeFunction: function() {
//Some code
}
initAnotherFunction: function() {
//More code
}
}
(It would be helpful if someone can tell me what this method is called so that I can research it more.)
My problem arises when I try to do the same thing in my node app in the home directory /main.js. The node app works fine on its own but when I add something like this:
test2 = {
initMyFunction: function() {
console.log("I finally decided to work! Good luck...");
}
}
and modify my html file like this:
<script src="../../main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test.initSomeFunction();
test2.initMyFunction();
});
</script>
then it won't work. Can someone please point me to the right direction as I don't even know what to Google. I am trying to avoid using RequireJS or anything else as I am a total beginner and the method that the developer used sounds so simple and tempting.
I wish this answer will help you:
I am using express, so I do this to solved your problem!
main.js file's position:
modify app.js add:
app.use(express.static(path.join(__dirname, '/')));
Then, in the view file:
<html>
<head>
<script src="public/javascripts/jquery-1.10.2.min.js"> </script>
<script src="main.js"></script>
</head>
<body>
<script>
$(function () {
//test.initSomeFunction();
test2.initMyFunction();
})
</script>
</body>
</html>
Open the chrome Developer Tools. You will see the result.
I am trying to play audio using AngualarJs
My HTML CODE:
<!doctype HTML>
<html>
<head>
</head>
<body ng-app="test" ng-controller="audioTest">
<button ng-click="playSound()"></button>
<script src="javascripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="javascripts/angular.audio.js"></script>
<script src="app.js"></script>
</body>
</html>
My app.js Code:
var app = angular.module("test",['ngAudio']);
var audio = app.controller("audioTest",function($scope,ngAudio){
$scope.playSound = function(){
$scope.audio = ngAudio.load("abc.wav");
$scope.audio.play();
}
});
While i load page i got error in console which lead me to
Error Details
The error you're reporting is due to an error resolving angular.audio.js script that can't be found by the name javascripts/angular.audio.js
I made a working fiddle: http://jsfiddle.net/en8x1nny/
This fiddle imports the script that the original demo from ngAudio is using.
The full path for that script is: http://danielstern.github.io/ngAudio/angular.audio.js.
You can download it and add it to your javascripts directory. Be sure not to use it by the URL mentioned above because github is not a CDN intended to serve scripts.
If you previously installed ngAudio by bower, the script should be in:
your_project_path/bower_components/angular-audio/app/angular.audio.js
I get the following error when trying to use the TorchPluging:
file:///android_asset/www/web/index.html: Line 12 : Uncaught TypeError: Cannot read property 'Torch' of undefined
I added the plugin to config.xml (I think it has changed from plugins.xml to config.xml in the newer phonegap versions?)
The following is my entire index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Flashlight</title>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/Torch.js"></script>
<script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
function turnTorchOn(){
window.plugins.Torch.turnOn(
function() { console.log( "turnOn" ) } // success
, function() { console.log( "error" ) }); // error
}
</script>
</head>
<body>
<button id="turnOnButton" name="turnOnButton" > Turn on Flashlight</button>
<script>
$('#turnOnButton').click(function(){
alert("will turn on now");
turnTorchOn();
alert("called turnOn done");
});
</script>
</body>
</html>
It actually isn't that hard to update an older style plugin to one that will work in 2.0.0+. You would need to:
Modify the JS to the new cordova.define() style of declaring plugins.
Update the package reference to org.apache.cordova.* from com.phonegap.* in the Java code.
Make sure you are not calling any deprecated API's.
I've written a couple of blog posts that cover the topic. If you do follow them an update the Torch plugin you should submit a pull request so everyone can enjoy your work.
2.0.0 Plugin - http://simonmacdonald.blogspot.ca/2012/08/so-you-wanna-write-phonegap-200-android.html
Deprecated API's - http://simonmacdonald.blogspot.ca/2012/07/phonegap-android-plugins-sometimes-we.html
I had downloaded jQuery.js file from jQuery.com .I have saved this file in 3 places, including JRE/Lib and desktop (where my HTML file which calls it is), to be sure that the jQuery.js file is found. I reference this js file as :
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#clas").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p id="clas"> Hello</p>
<p>Hi</p>
</body>
When I ran this HTML file on Mozilla browser, I expected 'Hello' to vanish when I clicked on it, but it did not. It remained as solid as ever.
But when I used a jQuery CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
And when I used an online HTML editor called Tryit Editor v1.5, it worked correctly!
It seems only the local jQuery.js is not doing its part. The JavaScript works fine, only the $() part doesn't. I'm using jdk1.6. I wonder why this snag has occurred. How to resolve it? Help.
Thanks! I found the solution to this problem, from a similar question posted in this forum, asked a year ago. Here is the link:
jQuery code doesn't work if I'm using a local jquery.js file, why?
The problem seems to have been incompatible encoding of the html and the js files. So I added the charset attribute to script tag of js. And the problem and 'Hello' both vanished at a click!
Your code works for me. Please check the below code, I have just modified the location of the jquery.js file where mine is stored in a different location.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%--<script type="text/javascript" src="jquery.js"></script>--%>
<script type="text/javascript" src="../Scripts/jQuery/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#clas").click(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<p id="clas">Hello</p>
<p>Hi</p>
</body>
</html>
I assume the location of your js is not correct. Are you using the same path of js where you have this "html" or jsp page? Or you have the js files in a separate folder?
Additionally, you can try alternate way as below:
$("#clas").live("click", function () {
$(this).hide();
});
Please let me know if this helps.