JavaScript: window.confirm with two window locations? - javascript

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>

Related

change event in EventListener doesnt trigger

So I made a small version of my problem. Here I am adding text into an input element. But when it is added it doesnt trigger the event listener.
function testFunction() {
document.getElementById("testInput").addEventListener("change", () => {
console.log("hi");
});
}
function testText() {
document.getElementById("testInput").value = "Hello there";
}
testFunction();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<script></script>
<button onclick="testText()" style="height: 20px"></button>
<input id="testInput" />
<script src="script.js"></script>
</body>
</html>
You need to create the event manually and use dispatchEvent() method to fire the event to the target element.
function testFunction() {
document.getElementById("testInput").addEventListener("input", () => {
console.log("hi");
});
}
function testText() {
document.getElementById("testInput").value = "Hello there";
let event = new Event("input");
document.getElementById("testInput").dispatchEvent(event);
}
testFunction();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<script></script>
<button onclick="testText()" style="height: 20px"></button>
<input id="testInput" />
<script src="script.js"></script>
</body>
</html>

My button will not cancel after clicking "cancel" in my popup

I have a button that acts as a link. The onclick is the myAlert() function shown below. The function creates a popup asking if you want to continue. It still goes to the next page even if you hit "cancel". What should I do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="grey" align="center">
<button onclick="myAlert()">Sign up</button><button >Log in</button>
<script>
function myAlert(){
if (confirm('Are you sure you want to sign up?')) {
console.log('Thank you.');
} else {
}
}
</script>
</body>
</html>
You placed the button inside the link itself. Therefore after closing the dialog, the browser processes the onclick event of the link which results in browsing to the to the link target.
You can remove the link elements completely and handle everything using the buttons:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="grey" align="center">
<button onclick="myAlert('333.html')">Sign up</button><button onclick="window.location.href='22.html'">Log in</button>
<script>
function myAlert(redirect){
if (confirm('Are you sure you want to sign up?')) {
window.location.href=redirect
console.log('Thank you.');
} else {
}
}
</script>
</body>
</html>
Use the preventDefault() method to cancel the default action that belongs to going to the next page.
function myAlert(e) {
if (confirm('Are you sure you want to sign up?')) {
console.log('Thank you.');
} else {
e.preventDefault();
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="grey" align="center">
<button onclick="myAlert(event)">Sign up</button><button >Log in</button>
</body>
</html>

Javascript button onclick function undefined

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.

jQuery Mobile Transitions Not Working At All

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.

Phonegap iOS - device ready not firing other events do

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.

Categories