Cordova javascript doesn't work on emulator - javascript

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!

Related

Trying to make buttons open different html files

So, making an app, where using buttons you navigate around, and it works fine going from the first page to the next, however, afterwards, the buttons on the subsequent page no longer function, even though their code is identical. Is there a way to keep the chain going?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTS-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'">
<meta http-equiv="x-Content-Security-Policy"
content="default-src 'self'; script-src 'self'">
<link rel="stylesheet" href="./temp.css">
<title>I Have You</title>
</head>
<body>
<button id="IHY" class="buttonA">IHY</button>
<!-- <p id="info"></p> -->
</body>
<script src="./renderer.js"></script>
<script src="./buttons.js"></script>
</html>
this is my main html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTS-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'">
<meta http-equiv="x-Content-Security-Policy"
content="default-src 'self'; script-src 'self'">
<link rel="stylesheet" href="./temp.css">
<title>Home</title>
</head>
<body>
<button id="friendButton" class="buttonB">Friends</button>
<button id="settingsButton" class="buttonB">Settings</button>
</body>
<script src="./renderer.js"></script>
<script src="./buttons.js"></script>
</html>
this is the page the button takes you to
<!DOCTYPE html>
<html>
<head>
<meta charset="UTS-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'">
<meta http-equiv="x-Content-Security-Policy"
content="default-src 'self'; script-src 'self'">
<link rel="stylesheet" href="./temp.css">
<title>Friends</title>
</head>
<body>
<h2>Friends :D</h2>
<button id="homeButton" class="buttons">Back</button>
</body>
<script src="./renderer.js"></script>
<script src="./buttons.js"></script>
</html>
this is where I want the "friends" button take me to
document.getElementById("IHY").onclick = function () {
window.location.href = src="./home.html";
}
document.getElementById("friendButton").onclick = function () {
window.location.href = src="./friends.html"
};
document.getElementById("homeButton").onclick = () => {
window.location.href = src="./home.html";
};
Heres my js for the buttons
I tried looking for anything online to fix this, but it isnt quite helping me, since it's all to do with websites, though im making an app.
The problem I think you might be having is that each page is using the same script for the buttons.
Because each page uses the same script for the buttons, it's trying to load js for buttons that don't exist on certain pages.
Therefore you may be running into a script that is failing before it loads the event listeners for the existing buttons. It might be failing to register the DOM event for a button that does not exist on that page.
Without seeing any browser console errors it's a bit hard to tell at the moment, but can you try creating a different script for each page that loads the button event listeners for buttons that exist on those pages?

How to import .js file to .ts in ionic?

I have create a .js file inside my /www/js/N.js after that I include in the index.html like src="assests/js/getImage.js"> and the script is before the build/polyfills.js
After that, what should I do to get my .js file working ??
here is my source code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<script src="assets/js/getImage.js"></script>
<!-- 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.error('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
May I know is there any import js to ts tutorial available ??
I found a lot on youtube but none of them meet my requirement. !!
Thanks in advance, please help me. Thanks !

Call phonegap/cordova plugin function within html

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.

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 ?

unable to load script HTML and javascript

So I have an index.html file with the following text:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Wade Game Engine</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="wade_1.5.js"></script>
<script src="wade.ifx_1.0.js"></script>
<script src="wade.particles_1.0.1.js"></script>
<script>
$(document).ready(function() {
wade.init('app.js');
});
</script>
</head>
<body>
<div id="container" style="border:0; width:800px; height:600px;">
<div id="wade_main_div" width="800" height="600" tabindex="1"></div>
</div>
<div id="chromeFix"></div>
<div id="chromeFix2"></div>
</body>
</html>
When I try to run this using a browser (tried with google chrome and internet explorer) it just pops a window saying:
unable to load main app script app.js
So I assume the problem is here:
<script>
$(document).ready(function() {
wade.init('app.js');
});
</script>
But I can't understand what's the problem...
Could anyone help me with this? It's driving me insane!
It could be that there is an error in app.js (so it isn't a valid .js file), or it could be that your browser is not allowing you to load local scripts asynchronously.
With Chrome, you could add --allow-file-access-from-files as a command line argument. Note that you only need to do this if you're using local files - if the files are hosted on a web server, it should just work without all this.
Alternatively, you can include app.js with the other script tags that you have in your HTML file, and just call wade.init() without passing 'app.js' to it
Do you have an app.js file? I haven't used this game engine but looking at its documentation, it appears that the init() method takes a mandatory parameter appScript, containing the filename of the app. In your case this would be app.js.
Make sure that you have the file app.js included in the same directory as your index.html file.
Hope this helps.

Categories