In a codebase I'm working on there's this type of callback binding where something has to happen whenever any input gets changed
$(document.body).on('change', '.input-sm', function (){
...
})
The thing is, some input-sms are changed via a clockpicker, which does not trigger the 'change' event. How would I make this work? Ideally, I'd like clockpicker to trigger the change event.
http://jsfiddle.net/4zg3w5sj/7/
EDIT: A callback is being bound to multiple inputs with clockpickers at once, so I can't use the input variable to trigger the change event (except if I explicitly iterate over the inputs I guess)
you can use the clockpicker callbacks
beforeHourSelect : callback function triggered before user makes an
hour selection
afterHourSelect : callback function triggered after user makes an
hour selection
beforeDone : callback function triggered before time is written to
input
afterDone : callback function triggered after time is written to input
input.clockpicker({
autoclose: true,
afterDone: function() {
input.trigger("change");
}
});
I've figure out the issue
The plugin trigger the change event but they use triggerHandler instead of trigger that mean you can't add listener on body , you have to listen directly on the input
// Hours and minutes are selected
ClockPicker.prototype.done = function() {
raiseCallback(this.options.beforeDone);
this.hide();
var last = this.input.prop('value'),
value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
if (this.options.twelvehour) {
value = value + this.amOrPm;
}
this.input.prop('value', value);
if (value !== last) {
this.input.triggerHandler('change');
if (! this.isInput) {
this.element.trigger('change');
}
}
if (this.options.autoclose) {
this.input.trigger('blur');
}
raiseCallback(this.options.afterDone);
};
see here a fix
var input = $('#input-a');
var value = input.val();
// bind multiple inputs
$('.myinput').clockpicker({
autoclose: true,
afterDone: function() {
console.log("test");
}
});
// in the actual code it's not tied to an id but to a non-unique class
// does not trigger if changed by clock-picker
$(".myinput").on('change', function(){
console.log("!!!!")
})
Related
I have input element which will take input and filter the contents and the filter event will be trigger once the user gets focused out from the input element.
When the user having the focus in the input element and he clicks in one of the button, the click event is invoked first and then the focus out event, as it creates conflicts while generating the filtered content.
I tried changing the order of code and other options such as changing the way of invocation of the click event - none of the ways worked out for me
$('body').on('focusout', '.classname', functionname);
function functionname(e) {
if (typeof e == 'object') {
}
}
$('body').on('click', '.buttonclass', function (e) {});
Could someone help me to build The FocusOut event to trigger first and then the click event.
Based on the current conditions, you have to - inside the click handler - retrieve the validation result, and based on that result, decide if button submission should or should not occur.
JS Code:
$("#input").focusout(function(){
var that = this;
valid = this.value.length ? true : false;
!valid && window.setTimeout(function() {
$(that).focus();
}, 0);
});
$("#button").click(function(e) {
if ( !valid ) { return false; }
e.preventDefault();
alert('execute your filter)');
});
I have a form with a conditional field that is only shown if the user selects a radio button for "other." If I remove the conditional on this field, my original javascript function works; however, with the conditional I can not get it to fire correctly.
The form has an event "cf.add" that fires when a conditional field is made visible, and using this jquery I get a correct response in the console:
jQuery( document ).on( 'cf.add', function(){
console.log('cf.add triggered' );
});
And if I remove the conditional so that this field is rendered when the page is rendered, I get the correct response in this field, which is to add a '$':
$("#fld_3169487_4").on("blur", handleChange);
function handleChange() {
var myValue = document.getElementById("fld_3169487_4").value;
if (myValue.indexOf("$") != 0)
{
myValue = "$" + myValue;
}
document.getElementById("fld_3169487_4").value = myValue;
}
I've tried putting this second function within the first, but no luck. I feel like I'm adding them in the incorrect order when I try to combine the two, I'm not sure what I'm doing wrong though.
I've also tried to call the function handleChange() on the 'cf.add' trigger, but that did not work for me either.
After some playing around, I figured it out:
jQuery( document ).on( 'cf.add', function(){
var otherField = $("#fld_3169487_3");
otherField.focus();
var dollarValue;
$(otherField).on("blur", function() {
dollarValue = otherField.val();
if (dollarValue.indexOf("$") != 0) {
dollarValue = "$ " + dollarValue;
}
$(otherField).val(dollarValue);
});
});
Since cf.add is an custom even that is published by your form, you can have other elements subscribe to the event:
$("#fld_3169487_4").on('cf.add', function(event){
if ($(this).val().indexOf("$") != 0)
{
$(this).val("$" + $(this).val());
}
});
Using $(this), we can target just the field the event is attached to. Additionally, data from the event publisher can be passed to the subscribers via the event argument.
I'm trying to figure out why my focus remains on an element. This is html from the autocomplete angular plug-in that I'm using:
<autocomplete id="search" ng-model="query" attr-placeholder="" click-activation="true" data="items" on-type="updateItems" on-select="searchItems"></autocomplete>
but every time I press enter no matter if I have my focus on the input field or not, or even on an other field, the on-select function is called every time.
this thing is in the plugin itself, maybe it needs some changes?
document.addEventListener("blur", function (e) {
// disable suggestions on blur
// we do a timeout to prevent hiding it before a click event is registered
setTimeout(function () {
scope.select();
scope.setIndex(-1);
scope.$apply();
}, 150);
}, true);
You could monitor what was the last selected input field with this code :
var lastFocusedElement = '';
// This would catch any input field - so you could add your forms selector too.
// for example : $("#myForm:input")
$(":input").focus(function () {
lastFocusedElement = $(this);
});
Then use the complete callback function from animate :
$("#div_NotificationOuter").animate({ bottom: '+=30px' }, 4000,function(){
if (lastFocusedElement != ''){
lastFocusedElement.trigger('focus');
}
});
I'm using a JavaScript library that occasionally changes the value of an input field. I want to detect when that happens.
Apparently, the change and input events are not triggered when the value of an input field is changed (at least not on Chrome).
To verify that, I have tried this (using jQuery):
<script>
$(function() {
$('#inp').on('change',function() { console.log('change event'); });
$('#inp').on('input',function() { console.log('input event'); });
$('#inp').val('hello');
});
</script>
<input type="text" id="inp">
Neither the change event nor the input event is triggered when I call .val('hello').
How can I detect the change? (Please remember that the code that changes the value is outside my control, so I cannot add a call to trigger() there.)
There is a work around, you can pool the value of textbox after regular intervals and trigger the event when it is changed.
Live Demo
$('#elementId').change(function(){
alert("changed");
});
var previousVal = "";
function InputChangeListener()
{
if($('#elementId').val() != previousVal)
{
previousVal = $('#elementId').val();
$('#elementId').change();
}
}
setInterval(InputChangeListener, 500);
$('#elementId').val(3);
Edit based on comments for many elements.
You can use array and monitor, 30 element wont be a performance concern
Live Demo
$('.someclass').change(function(){
alert("changed, id >> " + this.id);
});
var hashTablePrevElem=[];
$('.someclass').each(function(){
hashTablePrevElem[this.id] = this.value;
});
function InputChangeListener()
{
$('.someclass').each(function(){
if(hashTablePrevElem[this.id] != this.value)
{
hashTablePrevElem[this.id] = this.value;
$(this).change();
}
});
}
I want to trigger an event handler once per each actual change in an input field. For example, to validate (per keypress) entry of a credit card number (the change must be on each change so debouncing/throttling is not the answer).
I cannot use input alone as IE9 will not trigger this event from backspaces or cut/delete.
I cannot use keyup alone as this does not handle changes from a mouse (eg. pasting).
I cannot use change because this only fires on blur.
I can do $('input').bind('input keyup', handler) but this will fire two separate events most of the time. Assume that the handler is expensive and running it twice is unacceptable.
I can wrap the handler so that it only runs if the current value is different to the last checked but is there a better way?
What you are doing with checking the last input is what you need to do.
This is one way you can do it to store the last value.
function handler(){
var tb = jQuery(this);
var currentValue = tb.val();
if (tb.data("lastInput") !== currentValue) {
tb.data("lastInput", currentValue);
console.log("The current value is " + currentValue);
}
}
$('input').bind('input keyup', handler);
jsFiddle
You could always extend jQuery if you really do not want that logic in your function. It is a bunch more code, but one method.
(function(){
$.fn.oneinput = function(callback) {
function testInput(){
var tb = jQuery(this);
var currentValue = tb.val();
if (tb.data("lastInput") !== currentValue ) {
tb.data("lastInput",currentValue );
if(callback) {
callback.call(this)
};
}
return this;
}
jQuery(this).bind("keyup input", testInput);
};
}(jQuery));
$('input').oneinput( function(){ console.log(this.value); });
jsfiddle
I think the you have to use setInterval to moniter the change in the text box
try this demo
objTextBox = document.getElementById("trackChange");
oldValue = objTextBox.value;
console.log(oldValue);
function track_change()
{
if(objTextBox.value != oldValue)
{
oldValue = objTextBox.value;
console.log("changed")
}
}
setInterval(function() { track_change()}, 100);
Note: I don't personally think that this is the best solution.But I cant find a better and at leat it will work for sure in every case keyboard or mouse change ;)
Try this
$('input').bind('keyup cut paste', function (event) {
console.log('value changed');
});
Fiddle http://jsfiddle.net/sXvK2/1/
If you don't need the handler to return a value, you can make it return false so that it doesn't fire up a second time.
What about
$el.bind('input', handler);
$el.bind('keyup', handler);
...