I've seen there are a lot of answers about my problem but nothing works and I'm going mad.
I've a real simple iframe structure, what I want is that Back Button doesnt come back (page by page) but close app (hide or close is the same).
Think I'm really newbie, so please explain me everything step by step
This is my code:
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {
navigator.app.exitApp();
}
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<div class="container">
<div class="content">
<iframe src="home.html" name="pagina" class="pagina"> </iframe>
</div>
THANKS!!!!
This has worked for me in the past.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#homepage')){
e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
}
Hope this helps.
I have also faced the same issue initially i am fed up. But after many iterations I have succeeded. Here is the snippet, add this in .run function of your app.js
.run(function($ionicPlatform,$ionicPopup) {
$ionicPlatform.registerBackButtonAction(function (event) {
if(0){
navigator.app.exitApp();
}
else {
navigator.app.backHistory();
}
}, 101);
})
In the above code 101 is the priority. For exitting the app the priority is 100. so we are increasing the priority to 101.
Related
I am working on a iframe android app on phonegap. I use phonegap build to compile my code online. For a day,I am searching for a code that pop out confirmation box that shows "do you want to exit?" yes|no ?? I comeout with these code.But it is not working.Can you help out? do we have to add any plugin in config.xml?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Layout</title>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false); //Listen to the User clicking on the back button
}
function onBackKeyDown(e) {
e.preventDefault();
navigator.notification.confirm("Are you sure you want to exit ?", onConfirm, "Confirmation", "Yes,No");
// Prompt the user with the choice
}
function onConfirm(button) {
if(button==2){//If User selected No, then we just do nothing
return;
}else{
navigator.app.exitApp();// Otherwise we quit the app.
}
}
</script>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="content">
<iframe width="100%" height="100%" frameborder="0" src="#" />
</div>
</body>
</html>
For Apache Cordova / Phonegap you don't need any plug-in for the native events (like deviceready orbackbutton) but you need the cordova-plugin-dialogs plug-in to show the native alerts.
So, I'm guessing that your problem is not to catch the event, but to show the alert.
Please, try just ti print a classic window.alert(), to verify if the event is catch, after that you can try with the dialog plug-in.
I think two changes are there in your code
first, if you haven't added cordova.js then please add it to your header section of file
second, before calling backbutton event you need to give some time to complete loading of the page otherwise it will not understand the back button click event
So here I just added timeout to your function
function onDeviceReady() {
setTimeout(function(){
document.addEventListener("backbutton", onBackKeyDown, false); //Listen to the User clicking on the back button
},500);
}
Here is my working code too.
$(document).ready(function(){
setTimeout(function(){
document.addEventListener('backbutton', function(e){
if (confirm("Are you sure you want to exit app?"))
{
navigator.app.exitApp();
}
}, false);
}, 500);
}
here is my working code on pressing backbutton it will ask for exit
document.addEventListener("backbutton", function (e) {
e.preventDefault();
navigator.notification.confirm("Are you sure want to exit from App?", onConfirmExit, "Confirmation", "Yes,No");
}, false);
function onConfirmExit(button) {
if (button == 2) { //If User select a No, then return back;
return;
} else {
navigator.app.exitApp(); // If user select a Yes, quit from the app.
}
}
I'm trying to use the sharrre social media share buttons.
however, I don't understand why this code doesn't work locally OR on my server but it works perfectly fine on jsfiddle!
This is the jsfiddle:
http://jsfiddle.net/f7yobj60/
and this is my exact code:
<html>
<head>
<meta charset="UTF-8">
<title>Sharrre.com</title>
<meta name="description" content="Sharrre" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://sharrre.com/js/jquery.sharrre-1.3.4.min.js"></script>
<script>
$('.share-buttons').each(function() {
$(this).sharrre({
share: {
twitter: true,
facebook: true
},
template: '<div class="share-icon-holder"><img src="http://png-2.findicons.com/files/icons/2052/social_network/32/facebook.png" /><img src="http://png.findicons.com/files/icons/2052/social_network/32/twitter.png" /></div><div class="share-text">Share</div>',
enableHover: false,
enableTracking: false,
render: function(api, options){
$(api.element).on('click', '.twitter', function(event) {
event.preventDefault();
api.openPopup('twitter');
});
$(api.element).on('click', '.facebook', function(event) {
event.preventDefault();
api.openPopup('facebook');
});
}
});
});
</script>
</head>
<body>
<div class="share-buttons" data-url="http://www.google.com" data-text="Google test"></div>
<div class="share-buttons" data-url="http://www.stackoverflow.com" data-text="Stackoverflow test"></div>
<div class="share-buttons" data-url="http://www.google.com" data-text="Google test 2 - long text"></div>
<div class="share-buttons" data-url="http://www.stackoverflow.com" data-text="Stackoverflow test 245345"></div>
</body>
</html>
is there anything that I am missing in my HTML page?
I even downloaded the files from the github and even those files don't work for me locally or on my server!
this is the strangest thing I've ever encountered.
any help would be appreciated.
The buttons don't exist when your code runs, wrap the code in a ready handler so they exist when it does run.
JSfiddle does this automatically for you ... see the option onload selected in dropdown at top left
$(function(){
/* your code here */
});
Do anyone has similar experience? I would like to load an external file into current page by using .load("...") function. After loading, how can I trigger the click on an image in the <div id="tab-3-list">?
The script
$("#tab-3-list img.coupon_list").on("click", function (e) {}
doesn't function. If I embed the content of list.html into the current body, the above script works.
<html lang="en" class="ui-mobile">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<section id="home" data-role="page">
<article data-role="content">
<div id="home-content"></div>
</article>
<!-- content -->
</section>
<!-- home -->
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html");
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
</script>
</body>
</html>
External file list.html
<div id="tab-3-list">
<div class="ui-grid-a">
<div class="ui-block-a">
<img id="c01" class="coupon_list" src="/images/coupon/c01.png">
</div>
</div>
<!-- /ui-grid-a -->
</div>
<!-- /tab-3-list -->
Try to use event-delegation at this context since you are loading the DOM elements at runtime,
$("#home-content").on("click","#tab-3-list img.coupon_list",function (e) {
e.preventDefault();
alert(this.id);
});
try this..
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html", function(){
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
});
</script>
load uses ajax and thus takes sometime to load data from external page. When you are attaching click event to img.coupon_list, it's not even present in DOM ( in page ).
Try this,
$("#home-content").load("list.html", function () {
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
This is attaching click only when data from load is returned and added to the DOM.
Use event delegation - .on(), and to trigger click event use .trigger()
$(document).ready(function() {
$("#home-content").load("list.html",
function(){
$('#tab-3-list img.coupon_list').trigger('click');
});
$("#home-content").on("click","#tab-3-list img.coupon_list", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
-just put event in live mode , it's work after reload :
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html");
$("#home-content").one("load",function(){
// everytime an image finishes loading
}).each(function () {
if (this.complete) {
// manually trigger load event in
// event of a cache pull
$(this).trigger("click");
}
});
$("#home-content #tab-3-list img.coupon_list").live("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
}); </script>
I am having problems getting the OnChnage Listener to work, if i position the script after the </form> tag the listener works fine but if i place the script within the <head> tags it fails to work.
On my site i can only have the script within the <head> tags is there anything I can do to make the script runn within the <head> tags?
in this configuration the script does not work
<head>
<script type="text/javascript">
if(window.addEventListener) {
document.getElementById('address').addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementById('address').attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('worked');
}
</script>
</head>
<body>
<form>
<input id="address" name="address" type="text"/>
<input id="test" name="test" type="text"/>
</form>
Put it this way:
<head>
<script type="text/javascript">
window.onload= function () {
if(window.addEventListener) {
document.getElementById('address').addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementById('address').attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('worked');
}
}
</script>
</head>
Put your code in the window.onload function:
<head>
<script>
window.onload = function() {
if(window.addEventListener) {
document.getElementById('address').addEventListener('change', loadXMLDoc, false);
} else if (window.attachEvent){
document.getElementById('address').attachEvent("onchange", loadXMLDoc);
}
function loadXMLDoc(){
alert('worked');
}
}
</script>
<body>
...
</body>
When you place the script in the <head>, the elements you are getting with document.getElementById do not exist yet. Wait for the window to load before adding the event listener.
You need to wait for the window to load with a jQuery $(document).ready or by adding a loaded listener to the window:
window.addEventListener('load',addListener,false);
function addListener() {
//your code here
}
In head:
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#anchor_id").click(clickHandler);
window.onbeforeunload = confirmExit;
});
function clickHandler() {
/* hide/show some hidden div's */
$("body").append("<p>Hi there</p>");
}
function confirmExit() {
return "There are some unsaved changes on page.";
}
</script>
</head>
In body:
<a id="anchor_id" href="javascript: void(0);">Click Me</a>
Is it possible to prevent onbeforeunload from being called
when clicking on this link in Internet Explorer? In the rest
of the browsers the code is working fine.
Try setting href="#" instead, and return false in the clickHandler function (or prevent the default event by event.preventDefault())
You could wrap the event assignment in condition browser logic using jQuery's browser helper:
http://docs.jquery.com/Utilities/jQuery.browser.version
Try this, tested in FF3.5 and IE8
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#anchor_id").click(clickHandler);
window.onbeforeunload = function()
{
return "There are some unsaved changes on page.";
};
});
function clickHandler()
{
/* hide/show some hidden div's */
$("body").append("<p>Hi there</p>");
return false;
}
</script>
</head>
<body>
<a id="anchor_id" href="javascript: void(0);">Click Me</a>
</body>
</html>