I tried everything but still can't fire the deviceready event. I also tried to fire the pause event which worked OK. I'm using cordova 2.0.0. Here is my code:
<html>
<head>
<title>Taxiii</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale =1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<script src="cordova-2.0.0.js"></script>
<script src="jquery.js"></script>
<script src="xui.js"></script>
<script src="iscroll.js"></script>
<script src="loadData.js"></script>
<script src="loadServices.js"></script>
<script src="js.js"></script>
<script src="methods.js"></script>
<script src="setSizes.js"></script>
<script src="map.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places,geometry&sensor=true"></script>
<script>
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert("123")
}
</script>
</head>
<body onload="onLoad()">
...
I've tried more syntaxes but none worked.
There's no need to wrap document.addEventListener("deviceready", onDeviceReady, false); inside function onLoad(). Try without it and tell if it helped.
Related
I upgraded from Angular 7.2 to Angular 8 and now all the Angular scripts are inserted at the very start of the HTML (before !DOCTYPE).
Is this a bug? Does anyone know what might be causing it?
<script src="runtime.js" defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills.js" defer></script><script src="styles.js" defer></script><script src="scripts.js" defer></script><script src="vendor.js" defer></script><script src="main.js" defer></script><!DOCTYPE html>
<html>
<head>
<base href="/my-app/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</html>
My original HTML is pretty standard. The only oddities are an ng-app-settings.js script that loads some JSON for app config and the use of the TypeKit service for fonts. Neither of these caused a problem for Angular 7.
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</html>
Thanks for any help
Try adding body tags to your HTML.
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<script src="./ng-app-settings.js"></script>
</head>
<body>
<app>Loading...</app>
<script type="text/javascript" src="//use.typekit.net/abcdefg.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
</body>
</html>
I have a problem, when i try to make a phonegap build and test it on my android phone javascript don't run.
I have simple config.xml file, and there is a preview of my index.html's head :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>My app</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src = "phonegap.js" > </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=yes">
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Mobile_style.css"><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href='https://fonts.googleapis.com/css?family=Quicksand:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src = "phonegap.js" > </script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
// do your thing!
}
</script>
<script type="text/javascript">
window.onload = function()
{
MY JS CODE
}
</script>
</head>
<body onload="onBodyLoad()">
MY HTML
</body>
I have two html files, the index.html and the game.html, i have the same links and scripts in the game's head.
i have try to put my code on the but thats not working.
I have search some hours but i can solve the problem.
Thanks for your help !
You should include only one version of jquery. Also you don't need both cordova.js and phonegap.js, choose one script.
Your code may look much more cleaner:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>My app</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="Mobile_style.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href='https://fonts.googleapis.com/css?family=Quicksand:700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("Device is ready");
}
</script>
</head>
<body>
MY HTML
</body>
</html>
I'm creating a HTML IOS App with a Log in System.
At the moment when the user presses "log out" It will vibrate and a confirmation will pop up to say "are you sure you want to log out" there are two answers... Ok and Cancel.
I want OK to go to index.html
but CANCEL to stay on the same page (not log out).
At the moment both Ok and Cancel are directing to index.html (see code)
function vibrate() {
navigator.notification.vibrate(2000);
window.confirm('Are you sure you want to log out?')
window.location.href='index.html';
}
I'd appreciate some help
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<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" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
</script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function vibrate() {
navigator.notification.vibrate(2000);
navigator.notification.confirm('Are you sure you want to logout?',
decide,
'confirm logout?',
['cancel','ok'],
);
}
function decide(button){
if(button==2){
window.location.href='index.html';
}else{
//Another stuff
}
}
</script>
<title>Logged in</title>
</head>
<body>
<h1>Welcome</h1>
<p>Home</p>
<p>Courses</p>
<input type="button" value="Log Out"onClick="vibrate();">
</body>
</html>
With phonegap you should do something like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<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" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function vibrate() {
navigator.notification.vibrate(2000);
navigator.notification.confirm('Are you sure you want to logout?',
decide,
'confirm logout?',
['cancel','ok']
);
}
function decide(button){
if(button==2){
window.location.href='index.html';
}else{
//Another stuff
}
}
</script>
<title>Logged in</title>
</head>
<body>
<h1>Welcome</h1>
<p>Home</p>
<p>Courses</p>
<input type="button" value="Log Out"onClick="vibrate();">
</body>
</html>
im currently using PhoneGap and for some reason when i click a button, the function is undefined. iv tryed putting it inside the deviceReady function, as well as the document ready function, but neither seemed to make a difference.
I can't see what the problem is, if anyone can help that would be great.
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<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/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/libary.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.0.min.js"></script>
<title>Libary</title>
</head>
<body>
<div id="capture" class="wrapper" data-role="page">
<div data-role="header">
<h1>Libary</h1>
</div>
<div data-role="content" class="app">
Retrieve Photo
<p id="pictureStatus"></p>
<div id="imagelocation">
<img id="capturedImage"></img>
</div>
</div>
</div>
</body>
</html>
My JavaScript/jQuery:
document.addEventListener("deviceready", onDeviceReady, false);
var platform;
function onDeviceReady() {
//Find out what platform the device is running
platform = device.platform;
//Camera Section
function retrievePicture() {
// Take a picture using device camera and retrieve image
//navigator.camera.getPicture(onCaptureSuccess, onCaptureFail, {Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY});
$('#pictureStatus').text("hello");
}
function onCaptureSuccess(imageData) {
$('#capturedImage').css("display", "block");
var imageLocation = imageData;
$('#capturedImage').attr("src", imageLocation);
$('#pictureStatus').text(imageLocation);
}
function onCaptureFail(message) {
$('#pictureStatus').text(message);
}
}
Please don't define functions inside functions like that. Remove your retrievePicture() from inside the onDeviceReady() function and it should work fine.
As mentioned by #Robin van Baalen, this may be an interesting and relevant read - What you need to know about Javascript scoping.
Also, Functions and function scope.
I simply can't get the jQuery Mobile Transitions (I only want the "slide" one!) to happen but it's all a no-go. It just loads the page normally each time.
Full HTML code here:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<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" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0-alpha.1.min.css">
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<title>Parent Guide</title>
<script>
//iScroll initiate
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" id="header"><h1>The Parent Guide</h1></div>
<div data-role="content" id="wrapper">
<div id="scroller">
<div id="content">
Link
</div>
</div>
</div>
<div data-role="footer" id="footer"><div class="footer_abt"></div></div>
</div>
</body>
</html>
Just change jquery-1.9.0.min.js with a jquery-1.8.2.min.js version and that is that.