I am building my app using phonegap.I have Write a Code for on double click of back button of phone app should be close but its not working i have write a code.
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready',onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
var exitApp = false, intval = setInterval(function () { exitApp = false; }, 1000);
document.addEventListener("backbutton", function (e) {
e.preventDefault();
if (exitApp) {
clearInterval(intval)
(navigator.app && navigator.app.exitApp()) || (device && device.exitApp())
}
else {
exitApp = true
history.back();
}
}, false);
},
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
so whats is Problem in it because it is act as its default back going functionality. i am using phone gap version 3.7.0.
#vatsal,
double click on the screen is the default for zoom. Using the back button that way is not a good way to exit. Most people use a dedicate [exit] button. You might consider the same.
FWIW, you do NOT need the e.preventDefault(); for that event.
You can look at my notes and source code on events here:
https://github.com/jessemonroy650/Phonegap-Events-test
and here:
https://github.com/jessemonroy650/Phonegap-PhysicalButton-test/blob/master/NOTES
Jesse
Related
I have the following code that runs on device ready:
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
onDeviceReady: function() {
var div = document.querySelector('.app');
div.appendChild(document.createTextNode('Scanning...'));
div.appendChild(document.createElement('br'));
// scan for any BLE devices for 10 seconds
ble.scan([], 10, app.onDeviceDiscovered);
setTimeout(app.scanComplete, 10500);
},
onDeviceDiscovered: function(peripheral) {
// print peripheral details to the the console and the UI
var peripheralString = JSON.stringify(peripheral, null, 2);
console.log(peripheralString);
var div = document.querySelector('.app');
div.appendChild(document.createTextNode('Found Device'));
var pre = document.createElement('pre');
pre.innerText = peripheralString;
div.appendChild(pre);
},
scanComplete: function() {
// update the UI indicating the scan is complete
var div = document.querySelector('.app');
div.appendChild(document.createTextNode('Scan complete.'));
}
};
app.initialize();
What I need to do is to run the above code only if a button is clicked and NOT on device ready.
Something like this:
$(document).on('click', ".letmepairBtn", function(){
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
onDeviceReady: function() {
var div = document.querySelector('.app');
div.appendChild(document.createTextNode('Scanning...'));
div.appendChild(document.createElement('br'));
// scan for any BLE devices for 10 seconds
ble.scan([], 10, app.onDeviceDiscovered);
setTimeout(app.scanComplete, 10500);
},
onDeviceDiscovered: function(peripheral) {
// print peripheral details to the the console and the UI
var peripheralString = JSON.stringify(peripheral, null, 2);
console.log(peripheralString);
var div = document.querySelector('.app');
div.appendChild(document.createTextNode('Found Device'));
var pre = document.createElement('pre');
pre.innerText = peripheralString;
div.appendChild(pre);
},
scanComplete: function() {
// update the UI indicating the scan is complete
var div = document.querySelector('.app');
div.appendChild(document.createTextNode('Scan complete.'));
}
};
app.initialize();
});
But when I run my code, the code fails to work. The reason is because I am still putting the deviceReady inside the click function which doesn't make sense at all. But i am struggling to figure out how to do this properly.
Can someone please advice on the above?
Any help would be appreciated.
thanks in advance.
EDIT:
The main issue is this line of code (I think):
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
because of this line, the following code only runs onDeviceReady:
onDeviceReady: function() {
var div = document.querySelector('.app');
div.appendChild(document.createTextNode('Scanning...'));
div.appendChild(document.createElement('br'));
// scan for any BLE devices for 10 seconds
ble.scan([], 10, app.onDeviceDiscovered);
setTimeout(app.scanComplete, 10500);
}
Which makes the code die at that stage.
Thers is no need to add and .on to document. You can keep everything the same, just change the listener from listening to the document to listen to the button your specifying
If your using jquery you can just change the event listener of your initialize function to this:
initialize: function() {
$(".letmepairBtn").click(this.onDeviceReady.bind(this));
}
Or you can acheive the same thing with vanilla javascript, just change the eventlistener and the target:
initialize: function() {
document.getElementsbyClassName('letmepairBtn')[0].addEventListener('click', this.onDeviceReady.bind(this), false)
}
Either way you can keep the same code as before, just call app.initialize at the end and wait for the click on the button.
Is it possible to debounce the click of a link? If a user clicks too many times too fast on a pjax link it'll break the load of new content.
$(document).on('click', 'a[data-pjax]', loadNewContent);
var $target = $('main.content section.context'),
$fake = $('main.fake'),
$fakeContext = $('main.fake section.context');
function loadNewContent() {
event.preventDefault();
var $this = $(this),
url = $this.attr('href');
$fake.addClass('is--loading');
$.pjax({
url: url,
fragment: 'body',
container: $fakeContext
});
$fake.one(transitionEnd, function() {
$target.html($fake.find('section.context').html());
$fake.removeClass('is--loading');
$fake.off(transitionEnd);
});
}
Any thoughts? I tried this, but it stopped the loadNewContent from firing. (https://github.com/cowboy/jquery-throttle-debounce)
$(document).on('click', 'a[data-pjax]', $.debounce(1000, true, function() {
loadNewContent();
}));
Something like this would work :
var callWaiting = false;
callAjax() {
if(!callWaiting) {
callWaiting = true;
makeHttpCall(url, data, function(response) {callWaiting = false;});
callWaiting = false;
}
}
I'm trying to test a Push Notification app with Phonegap. I registered my project at GCM and added my Project Number at the SenderID var. Here's the code:
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
var pushNotification = window.plugins.pushNotification;
alert("Register called");
pushNotification.register(this.successHandler, this.errorHandler,{"senderID":"543180841340","ecb":"app.onNotificationGCM"});
},
successHandler: function(result) {
alert('Callback Success! Result = '+result)
},
errorHandler:function(error) {
alert(error);
},
onNotificationGCM: function(e) {
switch( e.event )
{
case 'registered':
if ( e.regid.length > 0 )
{
console.log("Regid " + e.regid);
alert('registration id = '+e.regid);
document.getElementById('regId').value = e.regid;
}
break;
case 'message':
alert('message = '+e.message+' msgcnt = '+e.msgcnt);
break;
case 'error':
alert('GCM error = '+e.msg);
break;
default:
alert('An unknown GCM event has occurred');
break;
}
},
onNotificationAPN: function(event) {
var pushNotification = window.plugins.pushNotification;
alert("Running in JS - onNotificationAPN - Received a notification! " + event.alert);
if (event.alert) {
navigator.notification.alert(event.alert);
}
if (event.badge) {
pushNotification.setApplicationIconBadgeNumber(this.successHandler, this.errorHandler, event.badge);
}
if (event.sound) {
var snd = new Media(event.sound);
snd.play();
}
}
};
I get the first alert ("Register called") but not the regID. I'm using the Phonegap Developer app for Android and the "phonegap serve" command to get it live. I tried to download the app too, but still doesn't work.
Firing the ("Register called") Doesn't mean that the push notification registration is instantiated but it means that receivedEvent is called and that is good.
1- Make sure that push notification plugin is included in config.xml and the pushNotification object is not null.
to include the plugin to config.xml: add <gap:plugin name="com.phonegap.plugins.pushplugin" />
2- Make sure that the sender id is OK "no typos".
I'm trying to build a Javascript listener for a small page that uses AJAX to load content based on the anchor in the URL. Looking online, I found and modified a script that uses setInterval() to do this and so far it works fine. However, I have other jQuery elements in the $(document).ready() for special effects for the menus and content. If I use setInterval() no other jQuery effects work. I finagled a way to get it work by including the jQuery effects in the loop for setInterval() like so:
$(document).ready(function() {
var pageScripts = function() {
pageEffects();
pageURL();
}
window.setInterval(pageScripts, 500);
});
var currentAnchor = null;
function pageEffects() {
// Popup Menus
$(".bannerMenu").hover(function() {
$(this).find("ul.bannerSubmenu").slideDown(300).show;
}, function() {
$(this).find("ul.bannerSubmenu").slideUp(400);
});
$(".panel").hover(function() {
$(this).find(".panelContent").fadeIn(200);
}, function() {
$(this).find(".panelContent").fadeOut(300);
});
// REL Links Control
$("a[rel='_blank']").click(function() {
this.target = "_blank";
});
$("a[rel='share']").click(function(event) {
var share_url = $(this).attr("href");
window.open(share_url, "Share", "width=768, height=450");
event.preventDefault();
});
}
function pageURL() {
if (currentAnchor != document.location.hash) {
currentAnchor = document.location.hash;
if (!currentAnchor) {
query = "section=home";
} else {
var splits = currentAnchor.substring(1).split("&");
var section = splits[0];
delete splits[0];
var params = splits.join("&");
var query = "section=" + section + params;
}
$.get("loader.php", query, function(data) {
$("#load").fadeIn("fast");
$("#content").fadeOut(100).html(data).fadeIn(500);
$("#load").fadeOut("fast");
});
}
}
This works fine for a while but after a few minutes of the page being loaded, it drags to a near stop in IE and Firefox. I checked the FF Error Console and it comes back with an error "Too many Recursions." Chrome seems to not care and the page continues to run more or less normally despite the amount of time it's been open.
It would seem to me that the pageEffects() call is causing the issue with the recursion, however, any attempts to move it out of the loop breaks them and they cease to work as soon as setInterval makes it first loop.
Any help on this would be greatly appreciated!
I am guessing that the pageEffects need added to the pageURL content.
At the very least this should be more efficient and prevent duplicate handlers
$(document).ready(function() {
pageEffects($('body'));
(function(){
pageURL();
window.setTimeout(arguments.callee, 500);
})();
});
var currentAnchor = null;
function pageEffects(parent) {
// Popup Menus
parent.find(".bannerMenu").each(function() {
$(this).unbind('mouseenter mouseleave');
var proxy = {
subMenu: $(this).find("ul.bannerSubmenu"),
handlerIn: function() {
this.subMenu.slideDown(300).show();
},
handlerOut: function() {
this.subMenu.slideUp(400).hide();
}
};
$(this).hover(proxy.handlerIn, proxy.handlerOut);
});
parent.find(".panel").each(function() {
$(this).unbind('mouseenter mouseleave');
var proxy = {
content: panel.find(".panelContent"),
handlerIn: function() {
this.content.fadeIn(200).show();
},
handlerOut: function() {
this.content.slideUp(400).hide();
}
};
$(this).hover(proxy.handlerIn, proxy.handlerOut);
});
// REL Links Control
parent.find("a[rel='_blank']").each(function() {
$(this).target = "_blank";
});
parent.find("a[rel='share']").click(function(event) {
var share_url = $(this).attr("href");
window.open(share_url, "Share", "width=768, height=450");
event.preventDefault();
});
}
function pageURL() {
if (currentAnchor != document.location.hash) {
currentAnchor = document.location.hash;
if (!currentAnchor) {
query = "section=home";
} else {
var splits = currentAnchor.substring(1).split("&");
var section = splits[0];
delete splits[0];
var params = splits.join("&");
var query = "section=" + section + params;
}
var content = $("#content");
$.get("loader.php", query, function(data) {
$("#load").fadeIn("fast");
content.fadeOut(100).html(data).fadeIn(500);
$("#load").fadeOut("fast");
});
pageEffects(content);
}
}
Thanks for the suggestions. I tried a few of them and they still did not lead to the desirable effects. After some cautious testing, I found out what was happening. With jQuery (and presumably Javascript as a whole), whenever an AJAX callback is made, the elements brought in through the callback are not binded to what was originally binded in the document, they must be rebinded. You can either do this by recalling all the jQuery events on a successful callback or by using the .live() event in jQuery's library. I opted for .live() and it works like a charm now and no more recursive errors :D.
$(document).ready(function() {
// Popup Menus
$(".bannerMenu").live("hover", function(event) {
if (event.type == "mouseover") {
$(this).find("ul.bannerSubmenu").slideDown(300);
} else {
$(this).find("ul.bannerSubmenu").slideUp(400);
}
});
// Rollover Content
$(".panel").live("hover", function(event) {
if (event.type == "mouseover") {
$(this).find(".panelContent").fadeIn(200);
} else {
$(this).find(".panelContent").fadeOut(300);
}
});
// HREF Events
$("a[rel='_blank']").live("click", function(event) {
var target = $(this).attr("href");
window.open(target, "_blank");
event.preventDefault();
});
$("a[rel='share']").live("click", function(event) {
var share_url = $(this).attr("href");
window.open(share_url, "Share", "width=768, height=450");
event.preventDefault();
});
setInterval("checkAnchor()", 500);
});
var currentAnchor = null;
function checkAnchor() {
if (currentAnchor != document.location.hash) {
currentAnchor = document.location.hash;
if (!currentAnchor) {
query = "section=home";
} else {
var splits = currentAnchor.substring(1).split("&");
var section = splits[0];
delete splits[0];
var params = splits.join("&");
var query = "section=" + section + params;
}
$.get("loader.php", query, function(data) {
$("#load").fadeIn(200);
$("#content").fadeOut(200).html(data).fadeIn(200);
$("#load").fadeOut(200);
});
}
}
Anywho, the page works as intended even in IE (which I rarely check for compatibility). Hopefully, some other newb will learn from my mistakes :p.
I'm looking for a super simple jQuery extension. Basically I need to use some events that jQuery does not explicitly support. These events are the iPhone touch events like ontouchstart, ontouchend, and ontouchmove.
I have it working via this:
// Sucks
$('.clickable').each(function() {
this.ontouchstart = function(event) {
//do stuff...
};
}
Which kind of sucks and is unjqueryish. Here is what I would like:
// Better
$('.clickable').touchstart(function() {
//do stuff...
}
Or even better with 1.4
// Awesome
$('.clickable').live('touchstart', function() {
//.. do stuff
}
These events need no special handling and should work just like any other events, but I can't seem to figure out how to extend jquery to make them work just like all the other events do.
I wrote the plugin, if the user does have touch available, use, otherwise, call click
jQuery.event.special.tabOrClick = {
setup: function (data, namespaces) {
var elem = this, $elem = jQuery(elem);
if (window.Touch) {
$elem.bind('touchstart', jQuery.event.special.tabOrClick.onTouchStart);
$elem.bind('touchmove', jQuery.event.special.tabOrClick.onTouchMove);
$elem.bind('touchend', jQuery.event.special.tabOrClick.onTouchEnd);
} else {
$elem.bind('click', jQuery.event.special.tabOrClick.click);
}
},
click: function (event) {
event.type = "tabOrClick";
jQuery.event.handle.apply(this, arguments);
},
teardown: function (namespaces) {
var elem = this, $elem = jQuery(elem);
if (window.Touch) {
$elem.unbind('touchstart', jQuery.event.special.tabOrClick.onTouchStart);
$elem.unbind('touchmove', jQuery.event.special.tabOrClick.onTouchMove);
$elem.unbind('touchend', jQuery.event.special.tabOrClick.onTouchEnd);
} else {
$elem.unbind('click', jQuery.event.special.tabOrClick.click);
}
},
onTouchStart: function (e) {
this.moved = false;
},
onTouchMove: function (e) {
this.moved = true;
},
onTouchEnd: function (event) {
if (!this.moved) {
event.type = "tabOrClick";
jQuery.event.handle.apply(this, arguments)
}
}
};
$("#xpto").bind("tabOrClick", function () {
alert("aaaa");
});
I've made a small update to Alexandre's plugin to include Android support. Android's browser does not currently support the window.Touch method of detecting touch support.
I love how Alexandre's script waits to ensure movement didn't occur to prevent triggering the event when the user swipes to scroll across the screen. However a downfall of that approach is that it causes its own delay by waiting for the user to lift their finger off of the screen before triggering. I've updated his plugin to include a "touchactive" class that gets applied to items that a user is currently touching. If you take advantage of that class you can provide immediate visual feedback to users without causing an actual event to get triggered until after movement check has completed.
jQuery.event.special.touchclick = {
setup: function (data, namespaces) {
var elem = this, $elem = jQuery(elem);
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
if (window.Touch || isAndroid) {
$elem.bind('touchstart', jQuery.event.special.touchclick.onTouchStart);
$elem.bind('touchmove', jQuery.event.special.touchclick.onTouchMove);
$elem.bind('touchend', jQuery.event.special.touchclick.onTouchEnd);
} else {
$elem.bind('click', jQuery.event.special.touchclick.click);
}
},
click: function (event) {
event.type = "touchclick";
jQuery.event.handle.apply(this, arguments);
},
teardown: function (namespaces) {
var elem = this, $elem = jQuery(elem);
if (window.Touch) {
$elem.unbind('touchstart', jQuery.event.special.touchclick.onTouchStart);
$elem.unbind('touchmove', jQuery.event.special.touchclick.onTouchMove);
$elem.unbind('touchend', jQuery.event.special.touchclick.onTouchEnd);
} else {
$elem.unbind('click', jQuery.event.special.touchclick.click);
}
},
onTouchStart: function (e) {
this.moved = false;
$(this).addClass('touchactive');
},
onTouchMove: function (e) {
this.moved = true;
$(this).removeClass('touchactive');
},
onTouchEnd: function (event) {
if (!this.moved) {
event.type = "touchclick";
jQuery.event.handle.apply(this, arguments)
}
$(this).removeClass('touchactive');
}
};
I've also posted this to github in case there are further caveats that are discovered https://github.com/tuxracer/jquery-touchclick
This now works, just like it's stubbed out above, on the latest jQuery release. Go jQuery!
Here's a start:
$.fn.touchstart = function(fn) { return this[fn ? "bind" : "trigger"]("touchstart", fn); };
$.event.special.touchstart = {
setup: function() {
$.event.add(this, "mouseenter", extendedClickHandler, {});
},
teardown: function() {
$.event.remove(this, "mouseenter", extendedClickHandler);
}
};
Where extendedClickHandler is the function that does what it's suppose to do.
More info here: http://brandonaaron.net/blog/2009/03/26/special-events
jQuery.com is a great source of information like this.
If you build your own plugin you'll be able to use whatever naming you like on your method calls.