jquery onchangeevent for a checkbox doen't fire imediately when userchecks/unchecks. but it fires af

[divya]

The below code works fine but I am facing an issue like the check/
uncheck event doesnot fire imediately when the user checks/unchecks
the checkbox. but fires only when after clicks outside anywhere on the
page after he changes the checkbox selection.

Please advice on what can I cahnge inorder to make it fire immediately
when user changes the checkbox in below code:

$(document).ready(function() {

var pselect = "L";
$("#pLevel").change(function() {
if ($("#pLevel").is(":checked")) {

pselect = "P";

}
else {
pselect = "L";
}
$.ajax({
url: '<%= Url.AbsoluteAction("List", "abc") %>',
type: 'POST',
data: { val: pselect },
dataType: 'json',
error: function(request, status, errorThrown) {
alert('Error retreiving list:\n' + status);
},
success: function(result) {

document.getElementById("ListSelect").options.length = 0;
$.each(result, function(i, n) {
var item = result[0];
var item2 = result[1];
$("#ListSelect").append($("<option></
option>").val(item).html(item2));

});

}
});
});

});

 

[Sean Kinsey]

The below code works fine but I am facing an issue like the check/
uncheck event doesnot fire imediately when the user checks/unchecks
the checkbox. but fires only when after clicks outside anywhere on the
page after he changes the checkbox selection.

Please advice on what can I cahnge inorder to make it fire immediately
when user changes the checkbox in below code:

....
'change' is probably not triggered until the 'blur' event is fired.
You should use the 'click' event instead.

 

[Richard Cornford]

The below code works fine but I am facing an issue like
the check/uncheck event

There is no "check/uncheck event". Do you mean the 'change' event, as
suggested by your Subject header and the use of - .change( ... - in
the code below?

doesnot fire imediately when the user checks/unchecks
the checkbox.

The DOM event shouldn't fire at all as change events relate to
changing the value of a field and toggling the checked state of a
checkbox doesn't change the value of the checkbox (only whether it
will be "successful").

but fires only when after clicks outside anywhere on the
page after he changes the checkbox selection.

Change events normally fire after you leave a field (if the value has
been changed), so what JQuery is doing doesn't sound that unexpected.

Please advice on what can I cahnge inorder to make it fire
immediately when user changes the checkbox in below code:

<snip>

Probably you want to switch to a click event (and verify that it is
firing for keyboard-based toggling, or an add appropriate key-based
handler).

Richard.

 

[David Mark]

There is no "check/uncheck event". Do you mean the 'change' event, as
suggested by your Subject header and the use of - .change( ... - in
the code below?


The DOM event shouldn't fire at all as change events relate to
changing the value of a field and toggling the checked state of a
checkbox doesn't change the value of the checkbox (only whether it
will be "successful").


Change events normally fire after you leave a field (if the value has
been changed), so what JQuery is doing doesn't sound that unexpected.

As in they have botched another one (with regard to checkboxes anyway?)
They also go through a lot of convoluted hoops to try to make change
"fire" prior to leaving text fields. Needless to say, it's a bunch of
hacks that can only be "justified" based on their observations that they
seem to work (sometimes anyway) in a few tested browsers.

<snip>

Probably you want to switch to a click event (and verify that it is
firing for keyboard-based toggling, or an add appropriate key-based
handler).

Click does fine by itself.

 

[David Mark]

...
'change' is probably not triggered until the 'blur' event is fired.
You should use the 'click' event instead.

The change event has nothing to do with the blur event. But you are
right about using the click event for checkboxes (after all, that's what
you want to know). Don't assume that the checked property has been
toggled at the time of click though (it hasn't been in an at least one
browser I know of).

 

[Garrett Smith]

DOM 2 says that change fires after the control loses focus[1], such as
after keyboard navigation (tab, arrow, etc) but in practice, behavior
across different controls, across major implementations varies.

I believe there is something in HTML5 for "input" events (oninput) and
IE has had, for a long time "onpropertychange" events.

As in they have botched another one (with regard to checkboxes anyway?)

I think you got confused by the double negative.

[...]

Click does fine by itself.

Checking the "checked" state in a "click" event should work, but do test
thoroughly with keyboard events for "Tab" and arrow-keys.

[*] red
[ ] green

Given: A group of radios with the same name. The second, labeled
"green", has onclick handler. The first, "red", is focused and selected.

1. press down arrow key

Result: "green" is focused and selected.

You want onclick for "green" to fire when that happens.

It seems sensible for a browser to fire the click event after it is done
processing; to notify any interested that the click is "done" but with
keyboard events you should test it across many browsers; this isn't
specified.

Keyboard navigation should not break the application.

[1]http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents-h3

 

[David Mark]

DOM 2 says that change fires after the control loses focus[1], such as
after keyboard navigation (tab, arrow, etc) but in practice, behavior
across different controls, across major implementations varies.

I believe there is something in HTML5 for "input" events (oninput) and
IE has had, for a long time "onpropertychange" events.

As in they have botched another one (with regard to checkboxes anyway?)

I think you got confused by the double negative.

Perhaps. The point is that a change event doesn't make sense for
checkboxes. Granted, some implementations do generate one when the
field loses focus (and others do it immediately on checking/unchecking
the checkbox). I remember that Dojo's unfortunately named "Mojo" demo
used a change listener with a checkbox with predictably disastrous
results. It was supposed to act as a toggle for "gravity" making
elements move to the bottom of the viewport when unchecked. Of course,
in IE it did nothing until you focused another element.

Ah, here it is:-

http://o.dojotoolkit.org/demos/dojo-moj-oe

Er, no that's not it, is it?

Trying their home page, I don't see any link for demos. I do see a
"Supporting" section with an Opera icon, which is a lie. They will tell
you the core supports it, but not the widgets, but the widgets are
advertised right below the Opera icon. Pants on fire.

Googling again... Dojo Demos:-

http://www.dojotoolkit.org/demos/

Line: 16
Error: 'undefined' is null or not an object

In IE8 no less. Granted I am in compatibility mode (was testing
something), but that almost certainly means IE7 would have bombed. I
know from dealing with them that they consider testing IE < 8 to be a
"waste of time". Still just gettin' stuff done I see. Back to having
fun again. You've got to figure if the authors can't even create a
simple demo index (that does absolutely nothing) with their "cutting
edge framework", it's time for them to fold. I weep for their users.

But I digress. With jQuery, there's no telling what is going on as they
attempt to "synthesize" change (and other) events with all sorts of hacks.

[...]

Click does fine by itself.

Checking the "checked" state in a "click" event should work, but do test
thoroughly with keyboard events for "Tab" and arrow-keys.

Test for what? And I assume you are talking about radio buttons.

[*] red
[ ] green

Ah, you are. Fair enough, but I was talking about checkboxes.

Given: A group of radios with the same name. The second, labeled
"green", has onclick handler. The first, "red", is focused and selected.

1. press down arrow key

Result: "green" is focused and selected.
Obviously.


You want onclick for "green" to fire when that happens.

I don't really care if it does or not.

It seems sensible for a browser to fire the click event after it is done
processing; to notify any interested that the click is "done" but with
keyboard events you should test it across many browsers; this isn't
specified.

Yes, I can think of some older browsers that did not fire the click
event in this case. That's one reason I don't design systems that need
to know when a radio button is clicked.

Keyboard navigation should not break the application.

Certainly not. Tell that to Google though.

 

[divya]

Thank you. It works as expected when I changed it to click.
And the event fired when I checked/unchecked the checkbox using
keyboard. Thanks.