I'm trying to make my own barcode scanner app. It should open like Snapchat which basically just means that when i'm opening the app the barcode scanner should showup immediately and not through clicking a button.
I'm using Cordova and Ionics and I'm currently using the barcode scanner plugin from Phonegap which actually works fine BUT i can't make it work through just opening the app. The screen will just be white. It's working when i'm using a button but in the other case not.
I'm new to Cordova and JavaScript and it would help me a lot if some of you can help!
Thanks a lot :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script type="text/javascript">
function scan() {
console.log("clicked");
cordova.plugins.barcodeScanner.scan(function(result) {
//success callback
alert(JSON.stringify(result));
}, function(error) {
//error callback
alert(JSON.stringify(error));
});
}
</script>
</head>
<body ng-app="starter">
<div class="bar bar-header">
<button class="button icon ion-navicon"></button>
<h1 class="title">Header Buttons</h1>
<button class="button">Edit</button>
</div>
<ion-content class="has-header">
<!--<button class="button button-positive" onclick="scan()">Click here to scan</button>-->
<script type="text/javascript">
scan();
</script>
</ion-content>
</body>
</html>
i would guess that your scripts haven't fully loaded, therefore you need to run scan() once this is complete. A simple way to do this is to add an onLoad attribute to your body tag:
<body onload="scan()">
Related
I am working on a Cordova/PhoneGap project. I tried to display js console.log in Xcode console.
I install the cordovan-plugin-console but it is not working.
After reading lost of stackoverflow post, I came up with this code:
<!DOCTYPE html>
<html>
<head>
<script>
function onDeviceReady() {
if (window.cordova.logger) {
window.cordova.logger.__onDeviceReady();
}
}
function init() {
document.addEventListener('deviceready', onDeviceReady, true);
}
</script>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/factories/DeviceFactory.js"></script>
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/DeviceController.js"></script>
</head>
<body ng-app="starter" onload="init()">
<script>
console.log("++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++")
</script>
<ion-nav-view></ion-nav-view>
</body>
</html>
However, it is still not working.
Could anyone help me?
Thanks
I don't know about Xcode's console being able to show a javascript console output but i know that you can do the same with safari dev tools, take a look at this : safari dev tools
My code is only shown for a split second after returning ionic serve and goes blank. I've everything needed to run this like nodejs, cordova, ionic, jdk, etc.
I'm new to ionic and would appreciate if someone can help me solve this.
This was run on internet explorer.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<h1>asdf</h1>
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
really you are very lost.
if you try to show
<h1>asdf</h1>
well that disappear because is replaced by the angular app in your code
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
you do write your in angularjs for that you can check the docs of angular and ionic.
you can retire the class of body and write direct in index but that is the really bad way
I am trying to check out my ionic project which is built through angular js but unable to make runnable it on plunker. It's working on my local machine, with all rpm packages, etc
<!DOCTYPE html>
<html data-ng-app='starter.controllers'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-touch.js"></script>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- your app's js -->
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
</head>
<body ng-app="starter" style="background-color: #E6E6FA; ">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
Link to Plunker here, also need your suggestions to improve it
jQuery is not loading because plunker needs https. Just change the url to src="https://code....
And you are using ionic, so you should include ionic library.
<script src="https://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
I have used mobile.js. In my apps using phonegap for developing app
Please check my code
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayTradeWin</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="cordova.js"></script>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//some js code here
}
</script>
</head>
<body>
Login
</body>
</html>
login.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayTradeWin</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script>
alert("Hello");
</script>
</head>
<body>
Login form here..
</body>
</html>
My page fliping perfectly but When I will going index.html to login.html by clicking of Login link in index.html page my JavaScript alert not working.
use
$( function() {
alert('Hello');
});
I guess this type of js script injection into HTML is not supported by Cordova. You need to do the logic in the index.js script.
Also if you wish to perform a alert you can use the apache cordova plug-in for notifications (you can get it via project config --> plugins).
My ng-click events are firing twice in my Ionic app and I have not been able to figure out how to fix this. To test this error, I have compressed my code to the following (the error is still occurring in the iOS emulator and on the iOS device, however not in the browser nor on android):
Running version (rendered by browser, error is not produced): play.ionic.io/app/2fc7300bf4a6
JS
(function() {
var app = angular.module('nh-launch', ['ionic']);
app.controller('testCtrl', function($scope) {
$scope.testClick = function () {
alert("hello");
};
});
}());
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>NoHarm Safety Application</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/angular-resource/angular-resource.js"></script>
<script src="lib/angular-random-string/src/angular-random-string.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="nh-launch">
<ion-pane>
<ion-content>
<div ng-controller="testCtrl">
<button ng-click="testClick()" class="button button-block button-calm">Test Click</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Help is greatly appreciated!
This is a current bug with ionic. It is due to the alert() and $window.alert() functions. I have posted the issue here: https://github.com/driftyco/ionic/issues/4345#issuecomment-139026496