I made simple date picker using JavaScript and jQuery. After choosing date it is shown in input box. This input box is not launching change event, probably because it was changed using JavaScript. Is there any way to launch this event, or to make custom one?
Run this code after you assign new value:
$('input').change();
.change just points to the .on function inside jquery, so it's better to use the .on directly.
$('#inputID').on('change', function() {
});
$("input#yourInputId").change();
or
$("input#yourInputId").trigger("change");
Should do the trick. Replace the #yourInputId with an id that represents the ID="abc" part of your HTML for the textbox
Be aware of potential browser irregularities or lack of support for change events - behaviour may vary, particularly in older browsers.
There is a change and an input event. The first fires after an input changed and lost focus. The latter fires immediately when the input changes. However there are no events that fire after programatically changing an input.
If you have control over the code that changes your inputs you can of course trigger the events manually like described in the other answers.
Related
I noticed in a Knockout binding to an HTML5 date input, that the binding was firing whenever a key was pressed when typing into the control. This is in contrast to the regular <input type="text"/> box where the value only causes the observable to update when focus is lost, or enter is pressed.
I believe Knockout by default is using the change event, and so for a simple example of how this behaves without Knockout, I produced a small fiddle here (http://jsfiddle.net/qm282xdm/).
You can see that the input text box doesn't fire the change event until you lose focus or hit Enter on the box, but if you type a new date into the <input type="date"/> then every keystroke causes the change event to fire.
Is this supposed to behave this way? The differing behaviour of the text vs date input is a little counter-intuitive. I'm running Chrome Version 34.0.1847.116 and I have a feeling an older version behaved more like I am expecting, but I can't be sure.
Edit: I would like to know if this is a problem with Chrome or 'by-design'. The firing of the change event is intuitive on a text type input, and I would expect it to be the same from a date type input. In the absence of any ideas on how to work around this, I will write a custom binding that fires in the cases I expect.
It's not really clear what kind of answer you're looking for. If the question is just "is it supposed to behave this way?" then the answer is "yes". The answer to "Why?" is a bit less clear.
If you want to make them a bit more consistent, you can use the textInput binding instead of the value binding, which ensures you get immediate updates from textbox bindings. Or, with older versions of knockout, use value binding with valueUpdate: 'afterkeydown'.
I'm building a jQuery plugin to style checkboxes. I hide the real one and after it insert button which when clicked toggles the hidden checkbox. But if I check the hidden checkbox via JavaScript, fake button doesn't change of course. I thought about making it to change using jQuery's .change() but it also doesn't trigger the change when made by JavaScript and not by actually clicking the checkbox.
I want plugin to be universal and to also work if someone has a button like "check all" or "uncheck all" which does the thing with JavaScript, I want my fake checkbox-buttons to change accordingly.
The question is what method should I use instead jQuery's change() in order to watch not only changes made by mouse clicks, but also by javascript for example $('checkbox').prop('checked', true);
edit2:
I realized there is no proper way to watch properties with JavaScript, except checking the property several times a second for each checkbox which is very unattractive.I decided not to include such inefficient feature to my plugin and instead leave it to user to also trigger the change if he wants to manipulate values via JavaScript.
You can't watch properties. You could set up a timer that looks for changes every few milliseconds, but that is not satisfying.
Instead, you should rely on all other code to trigger the change event, when they want plugins like yours to update (there may also be cases when they don't):
$(':checkbox').prop('checked', true).change();
You need to trigger the change event manually.
$('#checkbox').attr('checked', 'checked').change();
Have a look at this :
JsFiddle
I am looking to listen to the change of a textarea - the text area is hidden and not updated by a user directly, it is updated indirectly by another action.
As far as I can tell the change event is only fired when the focus is removed - In my case the focus never happens. How should I be monitoring the change of the textarea? - Note I am not using a JS library.
If you are not going to use a js library, the best way maybe to use the setInterval and Timing features, and simply check textarea at some interval.
Here is a link that may help: http://www.w3schools.com/js/js_timing.asp
I'm using the jQuery UI modal dialog, and populating it with some form fields. Because of this bug: http://bugs.jqueryui.com/ticket/4731, the first input gains focus when the dialog opens. To get around that, I'm trying to blur the affected input when the dialog is opened.
The problem is that there exists other functionality which is called for this input on a .blur(), and I don't want to fire that functionality for this.
So, I'm trying to use .focusout()and .trigger('focusout') to achieve the same effect, but with no results.
Doing either of these:
$('#input-id').focusout();
$('#input-id').trigger('focusout');
does not actually cause the input to lose focus, where using .blur() is successful. Am I missing something, or is there another way to accomplish what I need?
If you fancy a quick javascript hack you could use:
$(':focus').blur();
My suggestion would be to set the focus to some other element in the dialog when it is opened instead of setting textbox to blur. This should overcome your problem.
Hope this Helps!!
Focusout does not cause the element to lose focus. Instead focusout is triggered when an element loses focus. Check out http://api.jquery.com/focusout/
I used this as a workaround:
$('body').focus();
I used this without needing to execute javascript in the selenium driver:
field.send_keys :tab
Is there a cross-browser way to detect live changes to an input field?
By live, I mean not when the field loses focus, and not on the next keypress, and so on. Immediately or something like it.
Using combinations of jQuery and .change(), .keyup(), .bind('paste') and so on I can get working live change detection in some browsers, but not all. Using different combinations will make it work somewhat in other browsers.
The trickiest thing to get working is mouse manipulation of the input field - selecting text and moving it (which is essentially cut and paste), right-clicking and pasting or cutting, etc. For some reason even .mousedown() and .mouseup() don't seem to cut it.
The only cross-browser solution I can think of right now is to check the input field value every 100-or-so milliseconds and compare the value against a stored value. But this seems like overkill when the event-based solution comes so close.
Is there a jQuery plug-in that does this already? Or is there some other way to achieve this?
To complete your change and key handlers, you can add handlers for cut/copy/paste. They work in Firefox >=3, IE, Safari and Chrome (but not in Opera/Konqueror).
Would that cover everything for your use case?
Depending on the Browsers you need to support you might use HTML5's oninput.
It fires immediately when the monitored input changes. In jQuery you would just do:
$('#my-input').bind('input', function(e) {
console.log("#my-input's value changed");
});