jqGrid: Column resize triggers click event - javascript

First of all, these are the versions I am currently using:
jqGrid 4.3.2 with the fix for Chrome (posted by "Oleg" in jqGrid does not render correctly in Chrome/Chrome Frame). For some reason 4.3.2 and 4.4.0 did not solve the width issue for me as described in the post. The issue just popped up in IE in addition to Chrome.
jQuery 1.7.2
jQuery UI 1.8.9
The problem I am having is that when I try to resize one of the columns in the grid by dragging the mouse it seems to trigger the click event on the header to the left of the separator when I let go of the mouse button. This event then triggers reordering of the rows, so it is not very nice.
It only happens in IE (9), it works fine in Firefox and Chrome.
I think this is very strange, since I have not found anyone else who describes the same issue with jqgrid, and I don't think I do any "hacks" that would potentially give this behaviour.
Hope someone could point me in a direction here.

I did not find exactly what the root cause for my problem was, but managed to solved it by suspending the click handler in jqgrid for 10 milliseconds after the mouseup event on the column resize action. The click handler allready had a check for a variable called ts.p.disableClick, so I figured I might as well use this one. The only thing I needed to change was from this:
$(document).mouseup(function () {
if (grid.resizing) { grid.dragEnd(); return false;}
return true;
});
, to this:
$(document).mouseup(function () {
if (grid.resizing) {
// Disabling the click handler for 10 millisec.
ts.p.disableClick = true;
setTimeout(function() {
ts.p.disableClick = false;
}, 10);
grid.dragEnd(); return false;
}
return true;
});
You may call this a hack, but suspending the click handler for just 10 ms should not affect the user in any way, so I think it should be safe.
Hopefully this could be helpful if someone encounters a similar problem.

Related

Polymer 1.5/iOS: How to stop event propagation over iron-pages

We have a one page app which uses iron pages and express-router to navigate. In the browser and on android it works perfectly, on iOS however, we have a bug. The problem occurs if we switch pages by a button press. If the button is exactly over an input text field element (read: in the same position, but on the next iron-page) the input element gains focus directly after the page switch.
We used to have this problem as well with two buttons in the same position but this was solved by changing all on-clicks to on-taps.
Things we have tried so far:
Adding event.stopPropagation to the on-tap event
Including fastclick.js to prevent click delays (this worked partially when on-clicks were still in place but was made obsolete with on-tap)
Note that we have experienced this problem since Polymer 1.0 all through 1.5.
I reproduced your symptoms on an iPad Air 2, and trying e.stopPropagation(), e.preventDefault(), and returning false all had no effect. I'm not sure whether this is actually a Polymer problem.
I have a couple [hacky] workarounds to employ during the page-switch:
Option 1: Delay the page-change by 400ms. If your button has a ripple effect, the delay is masked by the animation.
codepen
Option 2: Disable the input and re-enable it after a 400ms delay. This prevents the input from picking up the tap event, but has the disadvantage that the disabled state could be noticeable (perhaps a lesser evil than your current problem).
codepen
Thanks #tony19, for the input.
We wanted to avoid delays, so I researched a bit more and ultimately fixed the problem. To answer my own question: the ultimate solution did lie in the FastClick library.
Basically what happens is that the tap event is fired immediately, but it doesn't replace the click event. Rather, the click event still fires, but with the original 300ms delay. This delayed click event thus fires on the newly displayed 'page' and triggers the input-field (or button had it been there) at the same x-y coordinates.
Adding the FastClick library once again solves this thanks to some updates in the library. However, it breaks some items that need the original click, such as Google Autocomplete. A basic solution to exclude FastClick is to instead apply it as:
FastClick.attach(document.body, {
excludeNode: 'something', });
This, however, only works for that node and not possible children. As such, to fix everything for input fields with Google's Autocomplete as well is done using:
// Disable FastClick for the children of a google auto-
// complete component.
var needsClick = FastClick.prototype.needsClick;
FastClick.prototype.needsClick = function(target) {
if ( (target.className || '').indexOf('pac-item') > -1 ) {
return true;
} else if ( (target.parentNode.className || '').indexOf('pac-item') > -1) {
return true;
} else {
return needsClick.apply(this, arguments);
}
};
// Remove click delay on iOS. As such, removing differences
// in timing between click and tap, thereby avoiding the
// fall-through problem.
FastClick.attach(document.body);
I will now close this thread, but I thought it'd be nice to leave this as reference for anyone else experiencing the problem.
Understand that it affected Polymer 1.0 to 1.5. Just to confirm that we experienced the same behaviour in Polymer 1.6 and the following fixes it.
_onTap: function(event) {
event.preventDefault();
event.stopPropagation();
}

Chrome: Potential onmousemove Bug

I ran into an issue that may be a bug in Chrome, but I was hoping some more seasoned developers could take a look at the problem. I'm using the dom-drag JavaScript library by youngpup (https://github.com/aboodman/dom-drag/blob/gh-pages/dom-drag.js) and noticed that it's not functioning correctly in Chrome. The error is occurring on line 86.
For some reason Chrome is registering a document.onmousemove event even if the mouse has not been moved. I've tried it on every other browser and Chrome is the only one causing the the event to be triggered when a user single clicks. Would this be considered a bug and if so, could anyone recommend a workaround to resolve the issue?
I was using drag.js, and I faced the same problem. I can see that from the link that PlantTheldea gave 2 years ago, chrome didn't fixed it.
In my side, I had draggable items in my DOM that should accept the click event handler. But onmousemove event was triggered during click event if the mouse was not moving. This bug was happening with Chrome.
So I suppose that other people may face the same issue. Here is how I solved it with drag.js:
1 - Go to your onmousemove handler
2 - Check if there are movement in X or Y. If there is any movement then you return true.
Example with the handler of drag.js that I edited:
// onmousemove handler for the document level
// activated after left mouse button is pressed on draggable element
handler_onmousemove = function (e) {
if(e.movementX === 0 && e.movementY == 0){
// No movement detected
return true; // We can continue with other handlers as click
}
Hope it can help.

IE raises blur on focus in textbox

First of all, this is my first question here, sorry if it is not asked properly.
I have a bug in a web app we developed in the office. The app is nearly done but In IE < 9 it happens that a text-box which has focus and blur events attached with jQuery raises the blur event as soon as you click on it.
You can see this in this picture (just clicked in the text-box):
https://www.dropbox.com/s/yn10xfrfxsr38bq/screen.PNG
$('#divVolee [type="text"]')
has no focusin or focus events attached.
The URL to the application:
http://86.126.255.70:2213/Anoxa/
If you want you can enter using the "Demarrer" button.
I do not ask anybody to write code for me or anything like that, I just don't know after days of searching in the code and on the net what could cause that.
I tried focusin, focus, focusout, blur, attaching directly or using delegates, the same thing. As soon as I click in the input field it raises the blur / focusout event.
Thank you for your help.
I found it. I started to comment everything out until I found the culprit:
function resizeAccordion() {
var active = $('#divAccordion').accordion('option', 'active');
$('#divAccordion').accordion('destroy').accordion({ heightStyle: "fill", active: active });
}
var resizeId;
$(window).resize(function () {
clearTimeout(resizeId);
resizeId = setTimeout(resizeAccordion, 600);
});
This code was supposed to re-size and re arrange the accordion in the page if the user re-sized the browser. Somehow in IE<9 it got triggered without reason and this caused the blur event to be triggered.
After so many hours. Maybe it is may thinking or code that was wrong, but i still hate IE for it.
I cannot reproduce this bug (using IE8 mode under IE9). But a simple workaround could be: (even quite weird)
$('#divVolee [type="text"]').focus(function(){
//>>code for FOCUS here<<
$(this).blur(blurcallback);
});
function blurcallback()
{
//>>code for BLUR here<<
$(this).off('blur');
}

jQuery mouseout issue on iPad [duplicate]

I have a jQuery code which works perfect on desktop browsers;
$("span#checkbox_err").mouseout(function () {
$("span#checkbox_err").fadeOut("slow");
});
But the same does not trigger on the iPad (as a result the checkbox_err is displayed on screen, but never hides)
How do I trigger the mouseout event on the iPad ?
Also I'll want to avoid using any additional library just to fix this small issue..
I HAVE A FOLLOW UP QUESTION
I am testing a page on iPad and am facing some issues implementing an equivalent of mouseout behavior..
So the issue is very simple to understand; 1. On my page, there is a checkbox on click (or rather touch), I want to show an errorMsg 2. On click/touch on anything other than the errorMsg, I want to hide the errorMsg
Below is the code I have written;
$(document).bind("touchstart",function(e){
if(e.target.id != "checkbox_err")
$("span#checkbox_err").fadeOut("slow");
});
}
$("input:checkbox").bind("touchstart",function(){
$("span#checkbox_err").fadeIn("fast");
});
Now the issue is when I click/touch on the checkbox, the errorMsg shows for a while and then it also hides it immediately (since target is not the errorMsg)
How do I fix this issue?
You could try .blur() instead of .mouseout()
Maybe because of bubbling?
It makes sense to me, the event will reach the underlying layer which is not the target.
So you have to stop eventPropagation:
$("input:checkbox").bind("touchstart",function(){
$("span#checkbox_err").fadeIn("fast");
event.stopPropagation.
});
Hope it helps ya.
Did you happen to find an alternative for mouseout? - which brought me here.
this example will surely help you ! http://jsfiddle.net/PzTcS/12/, It works well on iPad.
You could try with GestureEnd() event in ipad

jQuery mouseout on iPad

I have a jQuery code which works perfect on desktop browsers;
$("span#checkbox_err").mouseout(function () {
$("span#checkbox_err").fadeOut("slow");
});
But the same does not trigger on the iPad (as a result the checkbox_err is displayed on screen, but never hides)
How do I trigger the mouseout event on the iPad ?
Also I'll want to avoid using any additional library just to fix this small issue..
I HAVE A FOLLOW UP QUESTION
I am testing a page on iPad and am facing some issues implementing an equivalent of mouseout behavior..
So the issue is very simple to understand; 1. On my page, there is a checkbox on click (or rather touch), I want to show an errorMsg 2. On click/touch on anything other than the errorMsg, I want to hide the errorMsg
Below is the code I have written;
$(document).bind("touchstart",function(e){
if(e.target.id != "checkbox_err")
$("span#checkbox_err").fadeOut("slow");
});
}
$("input:checkbox").bind("touchstart",function(){
$("span#checkbox_err").fadeIn("fast");
});
Now the issue is when I click/touch on the checkbox, the errorMsg shows for a while and then it also hides it immediately (since target is not the errorMsg)
How do I fix this issue?
You could try .blur() instead of .mouseout()
Maybe because of bubbling?
It makes sense to me, the event will reach the underlying layer which is not the target.
So you have to stop eventPropagation:
$("input:checkbox").bind("touchstart",function(){
$("span#checkbox_err").fadeIn("fast");
event.stopPropagation.
});
Hope it helps ya.
Did you happen to find an alternative for mouseout? - which brought me here.
this example will surely help you ! http://jsfiddle.net/PzTcS/12/, It works well on iPad.
You could try with GestureEnd() event in ipad

Categories