Currently i am working on Mobile Apps using PhoneGap (Cordova 2.2), JQuery and Javascript. Landing Page is Login Page. So once i entered into Dashboard Page using login credentials, when i click the BACK BUTTON its returns to the login page not stay on dashboard page. What can i do??? Suggestions welcome.
I've tried,
SCRIPT
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when Cordova is loaded.
//
// At this point, the document has loaded but cordova-2.2.0.js has not.
// When Cordova is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is loaded and it is now safe to call Cordova methods
//
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {
alert("Back Button Clicked"); //called the alert..checking
}
</script>
HTML
<body onload="onLoad()">
</body>
My onDeviceReady and onBackKeyDown Function not working / Fired. Am i missing something???
Try with loggin variable to check if login and do something on the call back function.
function onBackKeyDown(evt) {
evt.preventDefault();
evt.stopPropagation();
if(loggedin=='yes'){
//dont do anything or show popup
}else{
history.back();
}
}
You need to bind the eventLinstener first, and call the app.initialize() in the page onLoad OR $(document).ready() method.
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
};
Try this
//after successful login
localStorage.setItem('login', 1);
// and your back function callback
function onBackKeyDown(e) {
e.preventDefault();
e.stopPropagation();
var isLogin = localStorage.getItem('login);
if (isLogin){
// stay here
} else {
history.back();
}
}
Related
I'm making a phonegap app using jquery mobile. I have searched and then found the syntax to exit from app using phone back button.
<script>
document.addEventListener("deviceready", deviceready, false);
function deviceready()
{ document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown()
{
if(confirm("Do you want to Exit?"))
{
navigator.app.exitApp();
}
}
}
</script>
it works like the image below, but I want to modify the notification. can I change the confirm and button name? for example, change OK to A, and Cancel to B. please help me.
I've found this syntax and it works, but how to change the interface of the notification? How can i use css to modify it?
<script>
document.addEventListener("deviceready", deviceready, false);
function deviceready()
{ document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown()
{
navigator.notification.confirm(
'Are you sure want to exit?', // message
onConfirm, // callback to invoke with index of button pressed
'confirm', // title
'No,Yes' // buttonLabels
);
function onConfirm(buttonindex)
{ if(buttonindex==1)
{
navigator.app.exitApp();
}
else {
window.close();
}
}
}
}
</script>
I have 2 pages. Index.html and detail.html. On index.html, when I click login, I call this function
$('form').submit(function (event) { //Trigger on form submit
var options = { dimBackground: true };
SpinnerPlugin.activityStart("Loading...", options);
});
It works perfectly. But on detail.html, I call this
$(document).ready(function () {
var options = { dimBackground: true };
SpinnerPlugin.activityStart("Loading...", options);
});
And it gives me the following error.
Uncaught ReferenceError: SpinnerPlugin is not defined
I have installed the SpinnerPlugin using xml as well. Wat should I do? Why is it working on index.html and not on detail.html?
Spinner plugin will only be available after the device ready event. This means that you should wrap your code with it:
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, false);
});
function onDeviceReady() {
var options = { dimBackground: true };
SpinnerPlugin.activityStart("Loading...", options);
}
displayMessage1() function gets called automatically on page load with values {"message":null,"messageType":"ready_anchor"}
Instead of it getting called only when the event gets fired. How do I invoke this function only when the event is fired.
<head>
<script>
function displayMessage1(event) {
$('#messageText').val(event.data);
}
if (window.addEventListener) {
window.addEventListener("message",displayMessage1, false);
} else {
window.attachEvent("onmessage", displayMessage1);
}
</script>
</head>
<body onload="onload();">
function onload()
{
document.onkeypress = function(e) {
//e.preventDefault(); // Prevent any default browser behaviour.
console.log('send: '+e);
document.getElementById('iframe').contentWindow.postMessage ('Hello Treehouse!', '*my*');
}
window.addEventListener('message', function(event) { console.log('get: '+event); }, false);
}
</script>
I want to forward keypresses to iframe but so far it doesnt work, iframe doesnt receive the messages
It looks like you're trying to bind the event listening within the same window as the sender, when you actually need that within the iFrame itself.
i.e. within your iFrame have this code:
<script>
window.addEventListener('message', function(event) { console.log('get: '+event); }, false);
</script>
Could I register 'deviceready' event for each html page? I use the initialize codes of Cordova 2.5 and it work fine. When I copy these codes to a new html file, It always call to the initialize() function of the index.html.
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
console.log('Received Event: XXX ' + id);
}
};
===============
HTML file:
....
<script type="text/javascript">
app.initialize();
</script>
....
Device ready will fire only once. It will fire next time only when the app is killed and opened again.