I have a small phonegap application with jquery mobile and backbone.
I'm trying to show popup to user by manually calling .popup() method.
Everything works fine on iOS but on android I got strange issue: popup is showing for few moments and than disappear.
Here the actual code:
var PostView = Backbone.View.extend({
events: {
'touchend .add-comment-button': 'addComment'
},
addComment: function() {
this.$(".comment-popup").popup('open', { history: false });
return false; // Stop bubbling.
}
});
I'm using history: false because this popup is actualy part of subpage.
The code looks very simple, I'm just can't understand why it can disappear, and why this happen only on android devices.
Thanks, and sorry for my bad english.
I spent hours trying to fix this problem.
Finally I ended up doing the following two things that seemed to fix the problem.
1 - Use the uncompressed jqm file. i.e jquery.mobile.1.2.0.js
2 - I was triggering the popup programatically using the 'tap' option - once changed to the 'click' option it worked.
$('.option').live('click', function() {
$('#popup-div').popup('open');
});
I spent hours trying to fix this problem.
Finally I ended up doing the following two things that seemed to fix the problem.
this code snippet may help you ->
$('#testBtn').on('tap',function(e){
console.log("button clicked");
e.preventDefault();
$('#testPOPUP').popup("open");
});
Please note i have used e.perventDefault().
I didn't feel like changing my .tap() events to the click event and I didn't have a case where I could use preventDefault()so I just added a timeout to the popup('open') line. My hoverdelay in jqm is set to 150 so I set this timeout to 600 just to be on the safe side. Works fine, doesn't feel sluggish for the user.
One way to 'fix' it is by setting data-history="false" on the popup div
See also this question
JQuery Mobile popup with history=false autocloses
I have the exact same problem when trying to use popup('open') on an android 2.3 device (both in native browser and in firefox) and it works just fine on browsers on other devices. I'm also using backbone event management to open my popup (used the tap event and no aditionnal options to popup).
What I did to 'correct' the problem is that I removed the backbone event management for this event and added a listener in the render function. In your case this would look something like this :
events: {
// 'touchend .add-comment-button': 'addComment'
},
render: function() {
$(this.el).html(this.template(this.model));
$(this.el).find('.add-comment-button').tap(function(el){
this.addComment(el);
return false;
}.bind(this));
}
I have no idea where the problem comes from (must be some incompatibility between backbone and jquery mobile) and why we only see it on android but for the moment with this workaround my app seems to work fine on any device.
Edit: oops, it turns out that in my case the problem was I was missing "return false;" in the function dealing with the event.
Now that I added it, it works correctly with the backbone event management.
Sadly that doesn't explain why you have the issue and why I was seeing it only on android.
In case it helps anyone, I had the same problem occurring with Bing Maps, with the Microsoft.Maps.Events.addHandler(pin, 'click', callback) method.
Not particularly nice, but instead I stored an ID in pushpin._id and did the following:
$("#page").on('vclick', function (event) {
if (event.target.parentElement.className === "MapPushpinBase") {
$("#stopPopup").popup('open');
}
});
One brute force option is to check whether popup was hidden and reopen it.
In a loop, because the exact time the popup becomes hidden seems to be varied.
var hidden = $('#' + id + '-popup') .hasClass ('ui-popup-hidden')
if (hidden) $('#' + id) .popup ('open')
A working example: http://jsfiddle.net/ArtemGr/hgbdv9s7/
Another option could be to bind to popupafterclose:
var reopener = function() {$('#' + id) .popup ('open')}
$('#' + id) .on ('popupafterclose', reopener)
$('#' + id) .popup ('open')
Like here: http://jsfiddle.net/ArtemGr/gmpczrdm/
But for some reason the popupafterclose binding fails to fire on iPhone 4 half of the time.
Related
I've tried both techniques in this answer to get a "dragging touch highlight" across elements in my PhoneGap App (testing on Android).
Here's my JSFiddle of the touchmove approach
$("td").bind("touchmove", function(evt){
var touch = evt.originalEvent.touches[0]
highlightHoveredObject(touch.clientX, touch.clientY);
});
Here's my JSFiddle of the vmousemove approach
$("#main").bind("vmousemove", function(evt){
$('.catch').each(function(index) {
if ( div_overlap($(this), evt.pageX, evt.pageY) ) {
$('.catch').not('eq('+index+')').removeClass('green');
if (!$(this).hasClass('green')) {
$(this).addClass('green');
}
}
});
});
Both work perfectly when emulating the app from desktop browser. Both work when viewing the JSFiddles from my Android tablet browser. But in the installed app on the tablet, it doesn't work. Instead of an updating highlight as I drag across the elements, all I get is a highlight on the first-touched event. The same for both methods.
Any ideas what's going on?
A comment on this question has an intriguing suggestion that "If you are running on android you also need to cancel the touchmove event to get new ones while touching. Don't ask me why...". Does that ring a bell, and if so, how would I "cancel the touchmove event to get new ones" with either of these approaches?
Alternately, has anyone successfully done a "dragging highlight" effect on a PhoneGap app, and would you care to share your technique?
I'm using phonegap (cordova 2.8), and android 4.2.1,
I use as frame works: knockout, & jquery mobile.
The app is based on http://propertycross.com/jquery-mobile/
I get the following funny behavior:
when clicking on a button that moves to another screen #2,
if there is a button in #2 screen at the same location,
then it get clicked as well...
The only solution I found is to wrap the code that change the screen with setTimeout:
setTimeout(function() {
application.navigateTo(viewModel);
},600);
This solve the problem but slow down the app...
This is actually unfortunate since the phonegap is already too slow...
Thanks.
There are two things you can do:
1) e.stopPropagation(), e.preventDefault()
phopkins describes this here:
jQuery mobile tap event triggered for twice
I'll elaborate, as this was a major issue for me. This applies to any of the tap, click, vclick and probably other events.
Your event functions should have stopPropogation() and preventDefault() called, like so:
$('#selector').tap(function(e) {
//your code here
e.stopPropagation();
e.preventDefault();
});
This helps, however, I found that you could still get the "phantom" click.
2) Bind the event to the page, not the button.
That way it's not bound to the next page.
For example, for a page with id='myPage' and a button with id='myBtn':
$('#myPage').on('tap', '#myBtn', function(e) {
//your code here
e.stopPropagation();
e.preventDefault();
});
Specifically, I'm seeing this issue on an Android tablet, but I'm told it's with ALL mobile devices -- iPhones, Nexus tablets, etc.
But I have the common problem of change events not firing. Here's the function code that has the click events assigned:
function do_this(with_this_data)
{
var that = this;
this.with_this_data = with_this_data;
this.period = 900;
this.updateHours();
$('#date').change(function() {
that.updateHours();
});
$('#time_hour').change(function() {
that.updateMinutes();
});
// extra irrelevant data trimmed out
}
Now...one fix that should work is to move those .change() statements into a $(document).ready block -- but the problem is, if I do, then i get all sorts of undefined variable issues and stuff....all of the "update" functions are within said $(document).ready block and defined by names like "FutureStuff.prototype.updateMinutes."
What are my options???
Mifeet, again, I appreciate your feedback; I know you weren't able to fully get me up and running, but I'm still thankful.
But anyway, I solved the issue...it meant that basically I had to rewrite a new version of the JS code and stick it in an "if this chap is using a mobile browser" block. So yeah, one huge block of code for desktop users, another for mobile...but it works. :) And it was a pain in the hiney.
I have this scrollable list of elements that aren't responding to the 'click' event on Chrome for Android. However, 'touchstart' does work. The problem is, using 'touchstart' interferes with the swiping behavior of the list. Is there an alternative to 'click' I could use?
Doesn't work:
jQuery(document).on('click', '.items section', function(e) {
// code
});
Does:
jQuery(document).on('touchstart', '.items section', function(e) {
// code
});
You might need to let us see the code that you are using before anyone can be of much help.
But your problem might be that touch start is bind to what ever the user does so you may need to unbind it.
Without seeing the code its hard to diagnose the problem.
I have run into this issue where asynchronous functions do not execute when the soft keyboard is open in the android browser.
For example:
<input type='text' id='foo'/>
....
document.getElementById("foo").addEventListener("keyup", function() {
window.setTimeout(function() { alert("1"); }, 20);
}, false);
You will never see the alert as long as you remain focused on the text input. This is true for xhr callbacks as well. If you attempt to make an ajax request, the request is sent, but the oncomplete callback is never fired until after you type another character in the textbox.
Does anyone know a workaround? You can see that Google obviously has a working example with their search suggestions, though I've not yet been able to figure out what exactly their solution is yet by looking at the minified/obfuscated source.
Any insight appreciated, Thanks
Using the newest jquery lib in the style of
$("#inputnum").keyup(function(e){
if (e.keyCode != '13') {
$("#outputarea").slideUp('slow');
};
});
causes the item selected with "#outputarea" to be slid up every time - as soon as I type any letter on the software keyboard or a hardware keyboard. Might want to give the jquery lib a shot? Cross-browser compatibility is the main reason I keep going back to it.