i am trying to use the cordova printer plugin from: https://github.com/katzer/cordova-plugin-printer/tree/master
I have followed the installation instructions and have this in index.html:
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
Here is my controller call:
$scope.printTable = function(){
$ionicPlatform.ready(function() {
cordova.plugins.printer.isAvailable(
function (isAvailable) {
alert(isAvailable ? 'Service is available' : 'Service NOT available');
});
})
};
i get this error on phonegap app:
Error: undefined is not an object (evaluating 'cordova.plugins.printer')
I have this added in my config.xml file:
<gap:plugin name="de.appplant.cordova.plugin.printer" version="0.7.0" />
What am i missing here
$scope.print = function() {
if ($cordovaPrinter.isAvailable()) {
$cordovaPrinter.print(//type what to display);
} else {
alert("Printing is not available on device");
}
}
just try like this
Related
I am loading a local html file as the src for a NativeScript WebView component. Contained within the html file are script tags which reference javascript files that are also local resources (bundled within the app). The html file loads into the WebView just fine, but the referenced script file (mylib.js) does not.
I suspect a pathing problem but I have tried almost every variation I can think of to no avail.
My project is actually a NativeScript-Vue project and is as follows:
App.vue
<template>
<Page #loaded="onPageLoaded">
<ActionBar title="Welcome to WebView"/>
<GridLayout>
<WebView ref="myWebView" row="0" col="0"
:src="filePath" #loadFinished="onWebViewLoaded" />
</GridLayout>
</Page>
</template>
<script>
import * as fs from "tns-core-modules/file-system"
import * as utils from "utils/utils"
export default {
data() {
return {
filePath: ''
}
},
methods: {
onPageLoaded () {
this.setLocalIndexFilePath()
},
onWebViewLoaded (event) {
if (event.error) {
console.log(error)
} else {
console.log('webview loaded')
}
},
setLocalIndexFilePath () {
const deviceName =
utils.ios.getter(UIDevice, UIDevice.currentDevice).name
// iPhone 6 is the name of my simulator
if (deviceName == 'iPhone 6') {
const webViewSRC =
encodeURI(`${fs.knownFolders.currentApp().path}/www/index.html`)
this.filePath = webViewSRC
console.log(webViewSRC)
} else {
this.filePath = "~/www/index.html"
}
}
}
}
</script>
index.html
<!doctype html>
<head>
<script src="./mylib.js" type="text/javascript"></script>
<script type="text/javascript">
function onBodyLoaded() {
var msg = document.getElementById('msg');
msg.insertAdjacentHTML('beforeend', '<br />body loaded!');
}
function onLocalButtonClicked() {
var msg = document.getElementById('msg');
msg.insertAdjacentHTML('beforeend', '<br />local: You clicked button!');
}
</script>
</head>
<html>
<body onload="onBodyLoaded()">
<Button onclick="onLocalButtonClicked()">Click Me</Button>
<Button onclick="onButtonClicked()">Click Me to test external js</Button>
<p id="msg">Debug:</p>
</body>
</html>
mylib.js
// This function never gets called
function onButtonClicked() {
var msg = document.getElementById('msg');
msg.insertAdjacentHTML('beforeend', '<br />external js file: You clicked button!');
}
webpack.config.sys
...
// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin([
{ from: "fonts/**" },
{ from: "**/*.+(jpg|png)" },
{ from: "assets/**/*" },
{ from: "www/**/*" },
...
This is a known issue with iOS. There is a patch work you could try, I had implemented the same in Playground for a similar issue, its applicable for Vue too.
I have checked all the solutions for the same questions. But still can't solve the issue. I'm using visual studio and cordova application.
Added the phonegap-plugin-push and corresponding code has been added. Using the ngCordova $cordovapushV5. Getting PushNotification of undefined error, i've checked in physical device and tried android version 5.1 and 6.2.1.
Added script files in below order.
<script src="scripts/angular.js"></script>
<script src="scripts/ng-cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
app.run(function ($http, $cordovaPushV5) {
var options = {
android: {
senderID: "xxxxxx"
},
ios: {
alert: "true",
badge: "true",
sound: "true"
},
windows: {}
};
// initialize
$cordovaPushV5.initialize(options).then(function () {
// start listening for new notifications
$cordovaPushV5.onNotification();
// start listening for errors
$cordovaPushV5.onError();
// register to get registrationId
$cordovaPushV5.register().then(function (registrationId) {
// save `registrationId` somewhere;
})
});
// triggered every time notification received
$rootScope.$on('$cordovaPushV5:notificationReceived', function (event, data) {
// data.message,
// data.title,
// data.count,
// data.sound,
// data.image,
// data.additionalData
alert(data.message);
});
// triggered every time error occurs
$rootScope.$on('$cordovaPushV5:errorOcurred', function (event, e) {
// e.message
alert(e.message)
});
});
I am developing an Phonegap (3.3.0) + Jquery Mobile (1.4) app.
I get an infinite loading page (white page with ui-loader icon). This is erratic and sometimes the app starts well.
I see a very strange bug: none of the first "console.logs" I use in my js file are displayed in the Phonegap Build Weinre debug console.
Only after a certain line (which contain by the way the first asynchronous function) the console.log are displayed in the Weinre console.
So I guess I have a binding order problem related to Jquery Mobile and Phonegap, but I can't find what's wrong in my initialization.
Can I be also due to the order in which I call js files in my index.html ?
I followed this post to register Phonegap and JQM : Correct way of using JQuery-Mobile/Phonegap together?
recommended here : jQuery Mobile : What is the order of page events triggering?
by #Gajotres.
Can you help ?
Thanks
HTML:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<!-- SPLASH PAGE -->
<div id="splash-page" data-role="page">
<div class='toastenjs' style='display:none'></div>
<center id="splashLogoCenter">
<img src="images/splash.png" width="200" />
</center>
</div>
<!-- WELCOME PAGE -->
<div id="welcome-page" data-role="page">
...
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.jsonp-2.4.0.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/functionCUgly.js"></script>
<script src="js/boardDims.js"></script>
<script src="phonegap.js"></script>
<script src="js/jquery.mobile.config.js"></script>
<script src="js/jquery.mobile-1.4.3.min.js"></script>
<!--POUCHDB -->
<script src="js/pouchdb-2.2.3.min.js"></script>
<!-- Flexslider-->
<!-- <script src="js/flexslider-v2.js"></script>--> <!-- v2.2 doesn't work, maybe because we're not using last versions of jquery and jqm -->
<script src="js/flexsliderV2.3.js"></script>
<!-- iScroll-->
<script type="application/javascript" src="js/iscroll.js"></script>
<script type="application/javascript" src="js/jquery.mobile.iscrollview.js"></script>
<!-- Add2home : create a shortcut icon of the wep app on the phone homescreen -->
<script type="application/javascript" src="js/add2home.js"></script>
<script src="js/GoogleLogin.js"></script> <!--Phonegap module by eric valenzia https://github.com/valenzia10/PhonegapGoogleLogin-->
<script src="js/jquery.ddslick.min.js"></script>
<script src="js/jquery-geturlvar.js"></script>
<script src="js/html2canvas.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
if (typeof(google) != 'undefined'){
google.load('visualization', '1.0', {'packages':['corechart']});
}
</script>
JS file:
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
$(document).one("mobileinit", function () {
console.log('mobileinit just fired'); //this one is not displayed in the weinre console
jqmReadyDeferred.resolve();
});
if ( isPhoneGap() ) {
document.addEventListener("deviceReady", onDeviceReady, false);
function onDeviceReady() {
deviceReadyDeferred.resolve();
}
$.when(deviceReadyDeferred, jqmReadyDeferred).then( EVERYTHING() ); // !!!!! normalement il faut virer ces parenthèses pour respecter le $.when....mais ça fait tout bugger !!!!!!!!!
} else {
console.log("NOT Running on PhoneGap!");
$.when(jqmReadyDeferred).then( EVERYTHING );
}
function EVERYTHING() {
console.log("on est entré dans EVERYTHING()"); //not displayed in the weinre console
insideEVERYTHING = 1;
console.log("jqmReadyDeferred is "+jqmReadyDeferred.state()); //not displayed in the weinre console
console.log("deviceReadyDeferred is "+deviceReadyDeferred.state()); //not displayed in the weinre console
//FOR EVERY PAGE
$(document).on('pagecontainershow', function (e, ui) {
//...
});
$(document).on('pagecontainershow', function (e, ui) {
//...
});
// --------------- SPLASH PAGE ---------------------
//$(document).on('pagecreate','#splash-page', function(){
$(document).on('pagecontainershow', function (e, ui) {
var activePageId = $(':mobile-pagecontainer').pagecontainer('getActivePage').attr('id');
if (activePageId === 'splash-page') {
console.log("we are in splash-page");
if (typeof debugOptionUseLocalDB != 'undefined' && debugOptionUseLocalDB) {
fallbackToLocalDBfile();
console.log('on yess');
}else{
if(connectionStatus == 'online'){
console.log("launching getJsonpFile...");
//DEBUG TIMER
var time=[];
var dummy;
dummy = new Date().getTime();
time.push(dummy);
getJsonpFile(dbUrl())
.done(function(data) {
console.log("...getJsonpFile done.");
if(localStorage) {
if ( isPhoneGap() || !isIOS() ) { //BUG iOS safari doesn't work with this (Cf. Philippe's ipad), si on est sur phonegap ok, si on n'est pas sur phonegap et pas sur iOS ok
localStorage.setItem("proDB", JSON.stringify(data)); //write to localStorage
}
}
//...JQM bindings are continued below
The best registration is the following :
var isPhoneGap;
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
isPhoneGap = checkIfPhoneGap();
if ( isPhoneGap ) {
$.when(deviceReadyDeferred, jqmReadyDeferred).done( Everything );
} else {
console.log("NOT Running on PhoneGap!");
$.when(jqmReadyDeferred).done( Everything );
}
$(document).on("mobileinit", function () {
//alert('mobileinit just fired');
//popShortToast("mobileinit just fired");
jqmReadyDeferred.resolve();
});
document.addEventListener("deviceReady", onDeviceReady, false);
function onDeviceReady() {
//popShortToast("deviceReady just fired");
deviceReadyDeferred.resolve();
}
function checkIfPhoneGap() {
var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1; // && document.URL.indexOf( 'file://' );
if ( app ) {
return true;
} else {
return false;
}
}
function Everything() {
//enter your JQM bindings here, and use Phonegap's features
}
I am developing an iOS app with Cordova and I am using the Facebook-connect plugin for authentification.
My problem : sometimes the Facebook Plugin doesn't load early enough so the FB authentification doesn't go the native way, but through a kind of in-app browser popup.
Is there a way to detect that Fb plugin has finished loading ?
Thank you
I think you should use facebook phonegap plugin as your authentication.
Download and install into your cordova project.
https://github.com/phonegap/phonegap-facebook-plugin
Then make sure you have this script in your project.
cdv-plugin-fb-connect.js
facebook-js-sdk.js
After that, paste this code into your main script
if ((typeof cordova == 'undefined') && (typeof Cordova == 'undefined')) alert('Cordova variable does not exist. Check that you have included cordova.js correctly');
if (typeof CDV == 'undefined') alert('CDV variable does not exist. Check that you have included cdv-plugin-fb-connect.js correctly');
if (typeof FB == 'undefined') alert('FB variable does not exist. Check that you have included the Facebook JS SDK file.');
FB.Event.subscribe('auth.login', function(response) {
//alert('auth.login event');
});
FB.Event.subscribe('auth.logout', function(response) {
//alert('auth.logout event');
});
FB.Event.subscribe('auth.sessionChange', function(response) {
//alert('auth.sessionChange event');
});
FB.Event.subscribe('auth.statusChange', function(response) {
//alert('auth.statusChange event');
});
function getSession() {
alert("session: " + JSON.stringify(FB.getSession()));
}
function getLoginStatus() {
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
alert('logged in');
} else {
alert('not logged in');
}
});
}
var friendIDs = [];
var fdata;
function logout() {
FB.logout(function(response) {
alert('logged out');
window.location.replace("#login");
});
}
function login() {
FB.login(
function(response) {
if (response.authResponse) {
alert('logged in');
FB.api('/me', function(me) {
if (me.id) {
localStorage.id = me.id;
localStorage.email = me.email;
localStorage.name = me.name;
window.location.replace("#home");
}
else {
alert('No Internet Connection. Click OK to exit app');
navigator.app.exitApp();
}
});
} else {
alert('not logged in');
}
}, {
scope: "email"
});
}
document.addEventListener('deviceready', function() {
try {
//alert('Device is ready! Make sure you set your app_id below this alert.');
FB.init({
appId: "appid",
nativeInterface: CDV.FB,
useCachedDialogs: false
});
document.getElementById('data').innerHTML = "";
} catch (e) {
alert(e);
}
}, false);
use login() to login . Enjoy!!
There must be an entry in the log, if the plugin fails to load while testing the app.
Also looks like you are using facebook API, phonegap other native plugins always load after the recommended plugins offered in here.
Also it loads as per the order you mentioned in the XML file,
<feature name="org.apache.cordova.facebook.Connect">
<param name="ios-package" value="FacebookConnectPlugin" />
</feature>
and
<plugin name="" value="" />
As developers clearly knows debugging in Phonegap is difficult than pushing a tanker.
Hope the following invoking method helps,
Add the reference of your plugin to your index.html
After the onDeviceReady() function, add the JavaScript for invoking the native plugin and handling the plugin results.
Add JavaScript functions named callNativePlugin, nativePluginResultHandler, andnativePluginErrorHandler
as shown below,
function callYourPlugin( returnSuccess ) {
YourPlugin.callNativeFunction( YourPluginResultHandler, YourPluginErrorHandler, returnSuccess );
}
function YourPluginResultHandler (result) {
alert("SUCCESS: \r\n"+result );
}
function YourPluginErrorHandler (error) {
alert("ERROR: \r\n"+error );
}
Finally add buttons to invoke your plugins as follows,
<body onload="onBodyLoad()">
<h1>Hey, it's Cordova!</h1>
<button onclick="callYourPlugin('success');">Click to invoke the Native Plugin with an SUCCESS!</button>
<button onclick="callYourPlugin('error');">Click to invoke the Native Plugin with an ERROR!</button>
</body>
I feel this method as easy to invoke any plugins, also you can checkout this article for more.
Im using Phonegap 2.9.0 in ios, i have gone through the tutorial for inappbrowser .and i have tried the following to in my application
App.js Calling method
indexpnl.element.on({
tap: function (e) {
var el = Ext.get(e.target);
var bval = el.getId();
if (bval == "btnfacebook") {
// onDeviceReady()//using this application screen its self loading the site view not in inappbrowser
document.addEventListener("deviceready",onDeviceReady, false);//here nothing happening
}
}
});
jsfunction.js Method
function onDeviceReady()
{
var ref = window.open('http://www.facebook.com', '_blank', 'location=yes');
ref.addEventListener('loadstart', function() { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function() { alert('stop: ' + event.url); });
ref.addEventListener('exit', function() { alert(event.type); });
}
And i have include the plug in config.xml
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
When i call using the above method nothing happens.When i call On onDeviceReady() the site is loading in application itslef but not in the inapp browser.What wrong with my code
Dunno but have you checked you have a
<script src="phonegap.js"></script>
in your script as in
https://build.phonegap.com/docs/plugins-using
Leaving it out can produce those kind of errors