I have an app that was developed using Phonegap and JqueryMobile.
This app has been downloaded around 15.000 times total in iOS, Android and iPhone.
The code is exactly the same on all platforms.
Once in a while the backend server overloads and when I look at the logs I see that one user is sending hundreds of times the same call. (the users are real persons and I have talk to them about the issue, so its not bot or anything like that)
For me it seems that the either the click event is looping or the server call is looping but could not detect the reason why.
This has happen to 3 users out of 15.000 (as far as I know), and the users have used the app many times before the issue happened. The issue happened on Android and iOS so it seems to me that there is an issue on the jquerymobile/javascript side.
Any idea what could have cause this issue?
I'd say first watch out for design issues in your js/DOM generation.
When you bind an event that has already been bound, jquery will bind it again without checking if that event has already been bound. That is fine if you want to attach multiple
event functions to the same event.
Any way, there are several ways to solve this. One is to unbind the event before binding it, with $.off(), eg.
$("#myDiv").off("click").on("click", function(e) {
// ...
})
another is to check inside the event function if the event has already been fired, eg:
$("#myDiv").on("click",function(e) {
if(e.handled !== true) {
alert('Clicked');
e.handled = true;
}
})
You can find more solutions with their pros and cons here
I ended up disabling the button after the first touch and that fixed the issue.
It seems that the main problem was tapping the button twice, but for some reason I could not detect after that, it entered an infinite loop.
do you do event.preventDefault() and event.stopPropagation() in the onclick function? (without that, browsers behaviour may vary a lot)
Other thought, it may be usefull to hide or disable the buttons at the start of the onclick functions to avoid users from doing multiple clicks.
I'm sure you're already doing all this, but just in case...
Related
I'm working on a software that got quite huge over many years and we've noticed there are many buttons (or clickable elements like <a> and <img>) that aren't safe from double clicks. Since the software is running on sometimes quite laggy hardware (with touch screens that might bug out and register double clicks for no apparent reason) I'd like to implement some kind of global solution for it.
My first thoughts were:
Global click listener that gets the click event, processes it and starts a cooldown on that specific element. If another click event is registered before the cooldown is over, it'll just block the event.
Changing the click() prototype method of a button or something. I'm not that good with plain JS but I've done something like that for plugins before so I know at least conceptually how that works.
Adding a directive that can be inserted into existing elements which need double click protection. This would probably be the "scalpel" method, even though people might just forget to add it. Sadly I have no idea whether my idea is actually possible with directives as I've never implemented one before.
Something like a class that can be inherited which handles all clicks. Might be possible to implement together with solutions (1) and/or (2).
Do you have a direction you can point me to to investigate further? Is some kind of global handling for this a good idea at all? Are any/all of the solutions possible at all?
We are using ZIGGEO to record video interviews in our new platform. I have noticed that sometimes it seems that the submitted event is fired more than once when the user submit the video. It doesn't happen all the time. Is it something that we can control?
ziggeo.ZiggeoApi.Events.on("submitted", (data: any) => {
this.addAnswer(data);
});
The addAnswer method is called multiple times, sometimes.
I saw that you send us a message to support as well Jordi, as mentioned there happy to help you with this here or there :)
For those that do not know I work at Ziggeo :)
In regards to the submitted event it would usually be called as:
ZiggeoApi.Events.on("submitted", function ( data ) {
//Your code goes here
});
I am not sure if the way you are using it currently could cause any issues, however what I presume to be happening is that there might be 2 embeddings on the page.
The reason why I say that is because v1's submitted event will fire each time some (any) Ziggeo embedding on your page raises the same.
If you want to make sure that events fire in more private manner, I would actually suggest using v2.
I consider v2 much better than v1 in a lot of different aspects, while both are great on its own (good to point out that these are 2 different systems if you will, v2 is not built on top of v1).
While v2 does not have submitted event it has a better one called verified which fires once the video is uploaded and before processing, requiring less time to tell you if the video would for some reason fail to be processed or not - you can read more about that on our forum
This would make it fire for specific video only, and could not be affected by multiple embeddings so I would suggest trying that one out.
You can see how to set it up:
The embedding
codes
Available
parameters
Events
on all of those pages you can change the version (v1 / v2) and on some even the revision to show you only relevant details for revision you are using.
PS: Might be good to see if this is specific to any browser maybe as well, causing the event to be called again for some reason.
I'm building a JavaScript Tizen app for Gear S2
In an earlier stage of development I considered using Angular, but I just ignored the possibility entirely because ng-click events made the screen flicker.
I kept building the app without any issues, my click event worked fine!
Until
I incorporated jQuery mobile
and suddenly my app now flickers when I "tap" the emulator.
I tried binding the event in 3 different manners, with the same result:
window.addEventListener("click", callback); // way 1
$(document).bind("click", changeMode); // way 2
$(document).bind("tap", changeMode); // way 3
does anyone have a clue of why this might be happening?
When do you bind the click event? Maybe you add the listener multiple times, so your Callback is also triggered multiple times.
Also why add the click listener to the window/document instead of a proper element?
I would also prefer to use ".on()" and ".off()" instead of bind.
Maybe you can share some of your code so we can "see" the problem?
Using Chrome's developer tools I am trying to determine what jQuery function is hooking an input button on the page for debugging purposes. I usually just keep searching until I find it, but I figured I'd ask this time.
Is there a way to find a jQuery button hook for a specific button in Chrome? I've tried looking through the Event Listener Breakpoints, but can never seem to find the right thing to pause it.
Basically, I need to know what jQuery / Javascript is being executed after the button is clicked.
The hooks are implemented in the application like so:
$('.button_class').click(function (){
$('#button_id').click(function(){
etc...
try this :
$(yourbutton).data('events');
Depending on the number of events/timers on the page this doesn't always work. But you can try "pausing" before clicking the button you want to debug in the JavaScript debug window. That way the debugger will pause on the next line that executes. The thing that occasionally prevents you from using that is if there is a "hover" or mouse move/in/out event tied on an element you have to pass over to get to the button (including the button itself). In that case I just remove those events (if I can) until I get the one I want. The event listener breakpoints would be more ideal but they're sometimes difficult when using jQuery or another library, I've actually put in a feature request to the Chrome Dev Tools team to address this very issue. (allowing you to specify what files are "yours" and only "breaking" in those specific files)
good luck -ck
I'm developing a web application which requires long-running Ajax requests. Unfortunately, under Firefox, pressing Escape during a request has the drawback of killing the request and any information it was holding. This is rather annoying, as this can lead to all sorts of nasty complications if this happens at the wrong time. Therefore, I would like to deactivate this feature.
My first reflex was to intercept keypresses at the boundaries of <body>, to ensure that they would not reach the window. For this purpose, I installed a [keypress] event handler, just for events whose [keyChar] is 27, and had it invoke [stopPropagation] and [preventDefault]. And for a time, it looked like this was working.
Then, I realized that it wouldn't work when the user hadn't clicked anywhere on the window, as <body> event handlers never received the event. I tried to attach my handler to <document> or <window> to no avail, so I eventually ended up adding a [load] event handler and had it force focus to <body>. And for a time, it looked like this was working.
Then, I realized that when the user was editing an <input>, for some reason, once again, the <body>, <document> or <window> event handler never seem to receive the event. So, I added yet another [keypress] handler, intercepting with [preventDefault] on the <input> when the [keyChar] is 27.
For the moment, it looks like it's working. However, with the history of this bug in my application, I'm a tad pessimistic.
So, I'm wondering if there's a better -- and reproducible -- method. Recall that the bug seems to appear only in Firefox, so I'm quite willing to take a Firefox-only approach here.
I'd be worried about other nasty complications that will happen when the users choose a bookmark or otherwise navigate away in the middle of the request. You might want to look at why you're using long running requests and see if that's something you can change...
If it isn't something you can change (or even if you can) you should look at why your requests aren't fault tolerant. Is there a way to put the communication into transactions, and roll the latest one back if the connection is interrupted?
I know this is kind of an old thread but there's an active bug logged against Mozilla regarding this issue (which I'm also facing). See https://bugzilla.mozilla.org/show_bug.cgi?id=614304 for more info.
One suggestion from this bug is to intercept and prevent the ESC key press at the window level (as also mentioned by OP):
window.addEventListener('keydown', function(e) {(e.keyCode == 27 && e.preventDefault())});
This might have unwanted side-effects though.