This code shows (i.e. alerts) "alert1" but not "alert2". I'm using a Samsung Galaxy Tab 3 7.0 as target device. The following code is in index.js.
EDIT: "alert3" is neither shown - for those who get dazed about javascript contexts and closures.
var app = {
bootStrap: function() {
//code here does not run
window.alert("alert2");
//document.body.style.backgroundColor = "blue";
},
initialize: function() {
var current = this;
//code here runs
window.alert("alert1");
document.addEventListener("deviceready", function(){
//code inside this anonymous function neither runs
window.alert("alert3");
current.bootStrap();
}, false);
}
};
The initialize method is being called:
<!DOCTYPE html>
<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/platform.css" />
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/angular-resource.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>1001Carros</title>
</head>
<body>
<script type="text/javascript">
app.initialize();
</script>
<div id="log">
<button id="clickme" value="Click Me"></button>
pantalla principal
</div>
</body>
</html>
Question: why? (also tried commenting and changing the background color to blue but neither line was executed at all).
I tried your code in cordova 3.4.x and it worked without any issues in the emulator.
I have included cordova.js in my index.html file. I can see that you have include phonegap.js. Not sure if that is the issue.
Are you testing on a real (Samsung Galaxy Tab 3 7.0) device or the Android emulator.?
which version of phonegap are you developing for?
You can try to remove all the closure code and test the code has below
document.addEventListener("deviceready", function(){
//code inside this anonymous function neither runs
window.alert("alert3");
}, false);
}
If the above code does not work than it means that the "deviceready" event is not getting fired.
You could try to create a custom event and check whether it works as shown below.
initialize: function() {
var current = this;
//code here runs
window.alert("alert1");
var event = new Event('myevent');
document.addEventListener("myevent", function(){
//code inside this anonymous function neither runs
window.alert("My Event!");
current.bootStrap();
}, false);
document.dispatchEvent(event);
}
Related
I'm building my first web App with stencil.js and until now I had my JavaScript code in my index.html file, but now I want to move my code to a separate file (script.js). But when I link script.js file it doesn't work.
Here is my index.html file:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Booker App</title>
<meta name="Description" content="Welcome to the Stencil App Starter. You can use this starter to build entire apps all with web components using Stencil!">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<meta name="theme-color" content="#16161d">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="x-ua-compatible" content="IE=Edge">
<script type="module" src="/build/app.esm.js"></script>
<script nomodule src="/build/app.js"></script>
<link href="/build/app.css" rel="stylesheet">
<link rel="manifest" href="/manifest.json">
<script src="./script.js"></script>
</head>
<body>
<booker-header></booker-header>
<booker-display></booker-display>
<booker-buttons name="Add Books"></booker-buttons>
<booker-form></booker-form>
<!-- <script>
var btn = document.querySelector('booker-buttons');
var form = document.querySelector('booker-form');
btn.addEventListener('click', function() {
form.open();
})
</script> -->
</body>
</html>
And here is my script.js file:
var btn = document.querySelector('booker-buttons');
var form = document.querySelector('booker-form');
btn.addEventListener('click', function () {
console.log('testing if file works');
form.open();
});
I tried putting script tag before </body> and it didn't help
Original Answer, still relevant
By moving your script into an external file it can now execute before the rest of the page is loaded since the script tag is above where the commented script is in the original HTML page.
Try wrapping your entire script in the DOMContentLoaded event to force it to wait until all of the page has loaded.
document.addEventListener('DOMContentLoaded', function () {
var btn = document.querySelector('booker-buttons');
var form = document.querySelector('booker-form');
btn.addEventListener('click', function () {
console.log('testing if file works');
form.open();
});
});
404 error answer
The src attribute for script.js starts with ./ and not / like all of the other resources you're loading in the header. Technically that's a relative reference which is ok, as long as script.js is right next to the HTML file in the directory tree.
Check your directory tree and make sure you have something like this. And make sure you have script.js at the root location which appears to be right next to mainfest.json.
- index.html
- script.js
-build
|-app.esm.js
|-app.js
I've been stuck on this issue for 10+ hours now and I'm having no luck in fixing it by myself. The problem is that I'm trying to use this dialog plugin on my Cordova app but its not working. I don't even think that the deviceready script is working.
Any questions feel free to ask
www/index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content=".." />
<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="stylesheet" type="text/css" href="css/index.css">
<link href="css/layout-styles.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-3.3.7.css" rel="stylesheet" type="text/css">
<script src="cordova_plugins.js"></script>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<title>Plugins Not Working</title>
<script src="cordova.js">
document.addEventListener("deviceready", onDeviceReady(), false)
function onDeviceReady() {
navigator.notification.alert(
'Script has loaded', // message
alertDismissed, // callback
'Loaded', // title
'Done' // buttonName
);
};
function alertDismissd() {
// do something
};
</script>
</head>
</html>
The <plugin name="cordova-plugin-dialogs" spec="^1.3.3" /> is in config.xml
Your code in <script> tag seems alright. If you have added the dialogs plugin using -
cordova plugin add cordova-plugin-dialogs
that should work fine.
And don't add src="cordova.js" for the script containing your code. Just do this -
<script>
document.addEventListener("deviceready", onDeviceReady(), false)
function onDeviceReady() {
navigator.notification.alert(
'Script has loaded', // message
alertDismissed, // callback
'Loaded', // title
'Done' // buttonName
);
};
function alertDismissd() {
// do something
};
</script>
If it still doesn't work, can you inspect in Google Chrome, see and list the error messages under Console tab? There might be some error before that <script> if that onDeviceReady() is not triggered.
UPDATE after seeing error messages from here -
Remove <script src="cordova_plugins.js"></script> That's not required. Plugins are directly called from js.
Cannot read property 'alert' of undefined => the plugin is not properly installed. Install it first using cordova plugin add cordova-plugin-dialogs in cmd.
Remove <script src="js/index.js"></script>. As you are doing everything inside <script> tag, you don't need index.js or its js contents (has errors).
I reinstalled windows 10 and reinstalled cordova as a whole. Now all plugins work :) sorry if this isnt the answer you wanted but it worked for me! Have a good day!
I'm building a mobile game with HTML5 and Javascript, for Android devices.
Android doesn't support HTML5 Audio, that's why i've choose to use a phonegap plugin : https://github.com/phonegap/phonegap-plugins/tree/master/Android/LowLatencyAudio
My structure is very simple, i've got 3 objects.
game, which is my main object.
animation, which is my object where are all my sprites animations.
sound, which all my sound are played, looped or stopped.
Here, my index.html file :
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script type="text/javascript" charset="UTF-8" src="cordova.js"></script>
<script type="text/javascript" charset="UTF-8" src="PGLowLatencyAudio.js"></script>
<script type="text/javascript" charset="UTF-8" src="assets/js/src/pixi.js"></script>
<script type="text/javascript" charset="UTF-8" src="assets/js/game.js"></script>
<script type="text/javascript" charset="UTF-8" src="assets/js/sound.js"></script>
<script type="text/javascript" charset="UTF-8" src="assets/js/animation.js"></script>
<script type="text/javascript" charset="UTF-8">
function onDeviceReady(){
PGLowLatencyAudio.preloadFX('drum','assets/son/drum/drumPiste1.mp3', game.sound.successHandler, game.sound.errorHandler);
};
function onBodyLoad(){
document.addEventListener("deviceready",onDeviceReady,false);
};
</script>
</head>
<body onload="onBodyLoad()">
<div id="wrapper"></div>
<script type="text/javascript" charset="UTF-8">
game.init();
game.sound.init();
game.animation.init();
</script>
</body>
I'm using the PGLowLatencyAudio.preloadFX function of the plugin, to preload my mp3 file.
After, I call my init function of my object sound, which is like that :
game.sound = {
init: function(){
soundsArray = [];
game.sound.playSound();
},
successHandler: function(result){
alert(result);
},
errorHandler: function(error){
alert(error);
},
playSound: function(){
PGLowLatencyAudio.play('drum', game.sound.successHandler, game.sound.errorHandler);
},
};
In my init function, i call my playSound function, to play the sound i've previously preload.
It try to play sound before preload, but i don't understand why.
Error message is : A reference does not exist for the specified audio id.
Here's the link, which i followed for a similar project earlier.
It has the solution to the problem !
I've scoured the net and stackoverflow looking for help, but can't seem to find any and I consider myself officially stumped. All of my code worked without a problem when it was all within standard script tags, then as soon as I moved them to their own .js file it crapped out. Help! This is what I now have in index.html (I've cut out all the irrelevant code since I'm just testing):
<html>
<head>
<title>PhoneGap Test</title>
<meta name="viewport" content="width=device-width, user-scalable=no;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/lib/jquery-1.7.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/jqtouch-jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/src/jqtouch.js"></script>
<script type="text/javascript" src="databasecalls.js"></script>
</head>
<body onload="init();">
<p>Some stuff here</p>
</body>
</html>
Then, this is what I have in databasecalls.js:
alert("file loaded");
function init(){
document.addEventListener("deviceready", phoneReady, false);
}
function phoneReady(){
// **** first, open the database ****
alert("Start making DB object");
dbShell = window.openDatabase("TimeBlogger", "1.0", "TimeBlogger", 20000000);
alert("Created DB object");
//and run another function if the setup is successful (displayEntries)
dbShell.transaction(setupDBTable, errorHandler, getDBProjectEntries)
}
So, unless I am mistaken, I should at the very least get alert(); to run as soon as it is read into index.html, right? I'm not even getting that! Is there something with the phonegap API that I missed... like everything needs to be in index.html or something?
Thanks in advance!
Justin
just trying to get jquery mobile firing with phonegap, but I can't get my hello world firing.
All of the references to the Js is correct.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery_mobile.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
$(document).ready(function() {
$(document).bind("deviceready", function(){
navigator.notification.alert("hello world");
});
});
}
</script>
</head>
<body>
</body>
</html>
Try this:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Hello With JQuery Mobile</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0rc1.min.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="jquery.mobile/jquery-1.6.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript">
var onDeviceReady = function() {
alert("OnDeviceReady fired.");
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
</head>
<body onload="init();">
</body>
</html>
Did you include the reference where the html and js ar located in Xcode?
You should try to start debugging by placing something in the body of the html and see if that appears when you compile and run.
Try removing the addEventListener and Function like this:
<script type="text/javascript">
$(document).ready(function(){
$(document).bind('deviceready', function(){
navigator.notification.alert("hello world");
});
});
</script>
There is no need to listen for 'deviceready' twice. The document will be ready first, followed by JQM firing deviceready.
I hope it helps!
I had a similar issue. Commenting out jquery or jquerymobile reference caused the app to work but i could not get it to work with both in the header. Both files were in the www folder of phonegap. I even tried referencing the code from the jquery.com but it didn't work.