Call phonegap/cordova plugin function within html - javascript

I'm very new to javascript and I started to make some practice with Phonegap.
I'm trying to call a plugin function within html but if I call it within a button it works fine:
<button onclick="cordova.plugins.autoStart.disable()">Stop AutoStart</button>
while if I try to call it directly I get: "autoStart is not defined" in the console.
<script type="text/javascript">
cordova.plugins.autoStart.enable();
</script>
How can I call it into html without the button?
Update1:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.2.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<button onclick="cordova.plugins.autoStart.disable()">Stop AutoStart</button>
<div class="perspective">
<img id="box1"/>
<img id="box2"/>
</div>
<p id="date"></p>
<p id="time"></p>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
jQuery(document).ready(function () {
//THE ERROR IS HERE
cordova.plugins.autoStart.enable();
});
</script>
</body>
</html>

When you created your cordova project, whether you did so via Command Line Interface or Phonegap Desktop, an app.js file should have been created as well.
Plugins can only be used after the device is ready, so you should put your code inside of the onDeviceReady() function inside of app.js.

Related

Cordova javascript doesn't work on emulator

I am trying to build an AngularJS to-do list app for android using Cordova. The page loads fine if I open it in the browser, but I can't get any any script to run in the emulator, except for alert()s that I put in the global scope. Here is my code for the index.html page....
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>To-do list</title>
</head>
<body>
<div class="app" ng-controller="ToDoListController">
<h1>Things to do.</h1>
<ul>
<li ng-repeat="item in list" ng-bind="item"></li>
</ul>
</div>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../platforms/android/platform_www/cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
And for the index.js page:
$(document).ready(function(){
document.addEventListener('deviceready', function(){
});
angular.module('ToDo',[])
.controller('ToDoListController',['$scope',function($scope){
$scope.list = ["FOO","BAR"];
}]);
angular.bootstrap(document,['ToDo']);
$('ul').append('<li>Item appended</li>');
});
As I said, if I put an alert() in the global part if index.js, it will fire but nothing else will. The angular bootsrap and the jquery append function will not execute whether inside the $(document).ready() or outside of it. Everything works fine in a browser. Any help is appreciated.
Via Kerri Shotts, in the above comment:
You need everything you're going to source to be local to your www directory. Your files in node_modules aren't going to be copied over, and will be missing in your app. Hence part of your problem. The other problem is that you should only ever source cordova.js using src="cordova.js"; the appropriate file will be supplied when you build the app.
This worked. Thank you!

shortest way to automatic update angular cordova app

i have my application built around angularjs#1 using gulp, my final output is 2 javascript files and 2 css files.
this final index.html looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="lib.css">
<link rel="stylesheet" type="text/css" href="app.css">
<title>Momen</title>
<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body layout="row" ng-include="'common/body.html'" ng-controller="AppCtrl as app">
</body>
</html>
my question is sometimes i need to push a small update chaning couple lines in app.js
note that i use templateCache so all my html files are also inside my app.js
what is the best way to update app.js on the fly without resubmitting app to apple ?

pagecontainer #change - JqueryMobile - Phonegap

I have a phonegap/jquerymobile app that I can't seem to get pagecontainer #change to work for. I have tried the most up to date syntax I could find, but seem to be missing something.
function goToCards() {
console.log('got to goToCards');
$(':mobile-pagecontainer').pagecontainer('change', '#cardsPage');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>BibHub Mobile</title>
</head>
<body>
<div class="app" data-role="page" id="loginPage">
<div data-role="header">
<h1>Biphub</h1>
</div>
<div data-role="content">
go to cards
</div>
</div>
<div class="app" data-role="page" id="cardsPage">
<div data-role="header">
<h1>Biphub</h1>
<h2>Your UID is <span id="uidSpan"></span></h2>
</div>
<div data-role="content">
<p>Your card stack is currently empty. Way to go!</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
When I run the app in xcode I successfully log 'got to goToCards'. However, there is no page change or any error. A normal non-js function link works to transition the page. Any ideas?
The pagecontainer widget and its methods were introduced in jQuery Mobile version 1.4. You appear to be using a really old version (1.0). Can you upgrade both jQuery and jQuery Mobile versions?
If not, you need to use $.mobile.changePage : API DOC

cordova websocket onready for android

Best regards,
I have tried several websocket plugins, but none worked for me.
I can't know what's wrong because when I try the code in a browser, it works successfully but after building the apk, nothing happens.
I have checked the configuration of config.xml, permissions and plugins.
me guess that Jelly beans inbrowser doesn't support websocket (we already know that) but even within the plugins? just a guess.
I am using jwebsocket as a websocket server.
cordova version 3.5.0
please tell me what is the wrong in my code
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="msapplication-tap-highlight" content="no" />
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
function onDeviceReady() {
var ws = new WebSocket('ws://192.168.1.6:8787/');
ws.onmessage = function () {
alert('a message was recieved');
};
ws.onopen = function () {
ws.send('I just connected!');
};
}
</script>
<script type="text/javascript" src="websocket.js"></script>
</head>
<body onload="onLoad()">
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>

Uncaught TypeError: Cannot read property 'PhotoSwipe' of undefined in javascript

I'm trying to implement swiping of image using html and javascript for phonegap application, following this demo PhotoSwipe there it works fine, but after adding into my project, not able to swipe the images. and even linked the js files correctly still i get this error in logcat "Uncaught TypeError: Cannot read property 'PhotoSwipe' of undefined at file:///android_asset/www/examples/01-default.html:26"
any idea on my issue? Thanks.
swipe code
<title>PhotoSwipe</title>
<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<link href="css/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript">
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
</script>
<script type="text/javascript" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript" src="/libs/klass.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.5.min.js"> </script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.5.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.5.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.5.js"></script>
<script type="text/javascript" src="photoswiper.js"></script>
}
Add the js files before the script that you have written, it might be the cause of the problem because the photoswipe features that you are trying to use in the script have not been loaded and hence are not available yet.

Categories