I have a page with a checkbox that is set to checked when the page is loaded. If/when the checkbox is unchecked I need to run a function. The following code works fine in all browsers with the exception of IE. In versions 7 and 8(haven't even tested 6) it works but you are required to uncheck it, check it, then on the second uncheck it executes the function. The jQuery documentation states: "As of jQuery 1.4 the change event now bubbles, and works identically to all other browsers, in Internet Explorer"... but it doesn't seem to work. Any ideas?
The code:
$('#checkbox').change(function() {
// do something
});
Upgrade to jQuery 1.4.2+ to resolve this. The 1.4.2 release included several changes/fixes for events.
This change event, change bubbling in IE (big one for many people), and lots more was fixed in that release, upgrading will resolve your issue :)
If you want to stop event bubbling, use
$('#checkbox').change(function(event) {
event.stopPropagation();
// do something
});
Perhaps you could also do something like
if ($.browser.msie) {
$('#checkbox').click(function() { // assuming this will be fired for keyboard as well
$(this).change();
});
};
This may force the event.
Related
I am using Select2 in my website, and I'm trying to use the select2-selecting event, but its not firing. I am also using Backbone.js in the app, so the first thing I tried was adding the select2-selecting to my events object:
// 'change .city':'cityChanged'
'select2-selecting .city':'cityChanged'
Note that I have a change event commented out - this change event works properly. In the documentation for Select2, the select2-selecting event is put directly on the object, not like this:
$('.city').select2().on('select2-selecting', function(e){
console.log('here');
});
instead, its supposed to be used like this:
$('.city').on('select2-selecting', function(e){
console.log('here');
});
I have also tried adding the event both of these ways, but the event didn't fire (I did check and the element was created on the DOM before I added the events).
When I add the event in the first method with the Backbone.js, the event is listed in the event listeners in the chrome debug console - it just doesn't get fired. Does anyone have an idea what is going on?
what version of select2 are you using?
I was having the same problem until I realize I was using the 3.3 version where this select2-selecting event not exists.
This has been included in the 3.4 version.
There was a change on earlier versions also where it changes name:
select2-close is now select2:close
select2-open is now select2:open
select2-opening is now select2:opening
select2-selecting is now select2:selecting
select2-removed is now select2:removed
select2-removing is now select2:unselecting
On even older versions, 'select2-removed' and 'select2-removing' events listed on #santi-iglesias' answer doesn't exists. You have 'removed' instead. Also, to get the affected optioin value, use 'event.val'.
So you can do something like this:
$('.select').on('select2-selecting removed', function(evt) {
var value = evt.val; //do something with this
});
Checked at v3.4.3.
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
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
I have the following code to bind some validation logic to be fired when a user updates the value of a textbox. I expect that the //Do some stuff here code will execute when any of the textboxes it is bound to lose focus.
function RegisterHoursValidationHandlers() {
$('.topic-frame-body input[type=text]').live('change', function () {
//Do some stuff here
});
}
This works exactly as I expect in IE, Firefox and Safari. However, the event never fires in Chrome and I have no idea why.
UPDATE: I was able to get the desired effect by changing 'change' to 'blur'. Though this still doesn't explain why it doesn't worh with 'change'.
There's no known quirk about chrome. (the change event is supported across all browsers)
Example with live showing it working against dynamic content.
Test it here:
There is a piece of information or an assumption being made here that makes this unsolvable.
UPDATE: If it works when you change it to blur, it is possible that you are overwriting the previous event or function. By changing it to blur, whatever is overwriting it no longer will because it is a a different event.
This would also explain why you are not seeing any errors. (keep in mind, I believe that jQuery will chain events bound to the same elements, but live() is a bit of a special case - but that fact might point to it being the function, not the event binding)
Try using .delegate() instead http://api.jquery.com/delegate/
I've tried you code in both FF and Chrome - http://jsfiddle.net/B3aRy/ - It worked in both. So maybe its an issue elsewhere in your code?
What version of Jquery are you using?
I can't see the issue myself, but .live does not support the "change" event until jquery 1.4+
Try:
function RegisterHoursValidationHandlers() {
$(".topic-frame-body input[type='text']").live('change', function () {
//Do some stuff here
});
}
With the quotes around 'text' as I have it. Worth a shot.
Or try:
$(".topic-frame-body input:text").live();
The point being, I think the problem is in the details of how you're targeting the input field, rather than in the method.
Looks like Apple has disabled the window.onbeforeunload event for iOS devices (iPhone, iPad, iPod Touch). Unfortunately I can't find any documentation as to why this event doesn't work in Mobile Safari.
Does anyone know if there's a reliable alternative to this function? Android's browser appears to support it just fine, and the Safari desktop application also supports the onbeforeunload event without issue.
I see that it's an old question, but i faced this problem recently.
I'm using window.unload and it works fine in ios browsers (although if you look at Apple documentation it seems to be deprecated and they recommend to use document.pagehide)
If you really need it, you cant just get all links, forms and DOM objects that have a handler changing the url and make those wait until you've done what you want.
For the links, you get them by getElementsByTagName, check if the href starts with anything but a # and just add your onbeforeunload function add onclick (which will be invoked before the href is looked at).
Same for the forms but with onsubmit.
And finaly, for the elements changing the href with JavaScript, you should make sure when you add the lsitener that you call your onbeforeunlaod function (or, if you use DOM0 or DOM1 listeners, you can just add some class and then use a global script that checks all elements with the class and adds it to the event listener with a closure.
But you should normaly be able to avoid the use of this event (probably using cookies to store the thing you wanted to send every x seconds and allowing to, in the worst case, have a look at it next time the user loads a page and, in the best case, be able to send an Ajax request at onbeforeunload or onunload which, even if it sends only the http headers, woudl allow you to get what you want).
Based on Xavier's answer, I devised a solution along these lines:
function doStuff() {
// here goes your logic
}
function isSafariMobile() {
return navigator && /Safari/.test(navigator.userAgent) && /iPhone|iPad/.test(navigator.userAgent)
}
function addWatcherToLinks(baseNode) {
if (!baseNode || !baseNode.querySelectorAll) { return; } // ignore comments, text, etc.
for (const link of baseNode.querySelectorAll("a")) {
link.addEventListener('click', doStuff);
}
for (const form of baseNode.querySelectorAll("form")) {
form.addEventListener('submit', doStuff);
}
}
// ...when the page loads...
// we watch the page for beforeunload to call doStuff
// Since Safari mobile does not support this, we attach a listener (watcher) to each link and form and then call doStuff.
// Also, we add such a watcher to all new incoming nodes (DOMNodeInserted).
if (isSafariMobile()) {
addWatcherToLinks(document);
window.addEventListener("DOMNodeInserted", (event) => { addWatcherToLinks(event.target); }, false);
} else {
window.addEventListener('beforeunload', doStuff);
}
This solution has some limitations. The biggest one is that it attaches itself to all forms and all links. Sometimes this might not be desired. If you need it you can skip some nodes (e.g. mark them with a particular data- attribute).
I was having the same problem. it seems safari browser in iphone triggers only focus and blur events and almost every other event is not triggered, e.g.(pagehide, pageshow, visibility change) but the good news is focus and blur event are supported and triggered on iphone, ipad & android mobiles as well.
window.addEventListener('focus', function(){
// do stuff
});
window.addEventListener('blur', function(){
// do stuff
});
hope this helps anyone.