I'm trying to change the "change" event of a Kendo UI Dropdownlist, but unfortunately I haven't had any luck. Here's the code I've tried so far: http://trykendoui.telerik.com/ukeV
Specifically, here's my dropdownlist initializer:
var onChange = function(e)
{
alert("something changed");
};
// create DropDownList from input HTML element
$("#dropdown").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
index: 0,
change: onChange
});
And this is my attempt to change that function later:
onChange = function(e){alert("attempt 1");};
var dropDownData = $("#dropdown").data("kendoDropDownList");
dropDownData.options.change = function(e){alert("attempt 2");}
dropDownData.refresh();
Specifically, I first tried just changing the onChange function, and then (when that didn't work), I tried changing the options.change function directly. While the options.change function did change (when I examined it in chrome debugger), the dropdownlist's actual functionality remained unchanged. I think I need to refresh the dropdownlist or something to make my edits actually take effect. Does anyone know how I can actually get the kendo grid to refresh and display my data?
I see you've already found a work-around, but I thought I'd add some more explanations.
The reason why changing it like this
onChange = function(e){alert("attempt 1");};
doesn't work is that you're passing a function to the widget, and the widget calls that function at appropriate times. You're not passing a reference to the variable onChange. So changing the variable won't affect the widget.
The reason why
dropDownData.options.change = function(e){alert("attempt 2");}
doesn't work is that Kendo stores handlers in its own structure (which is necessary since you can bind multiple handlers for the same event!), so it doesn't call whatever is in options.change at any given moment in time.
However, there is a setOptions method, and with that you could've made your second approach work:
dropDownData.setOptions({
change: function (e) {
alert("attempt 2");
}
});
I ended up using a simple work-around. When I put in the line
change: onChange
Kendo actually hardcoded in the function body into the dropDownData.options.change function, rather than referencing my named javascript function. It looked like this in the debugger:
function(e)
{
alert("something changed");
};
So my workaround was simply to use an anonymous function in the Kendo call. So I changed change: to
change: function(e) { onChange(e) };
Then when I changed onChange later, kendo referenced the named javascript function and called my updated version. Here's the working demo: http://trykendoui.telerik.com/AkIW/2
Related
I am trying to programmatically update a currency field to run the value changed event which holds a numeric calculation. I want the value to set to zero using something like.
$('.tester').igCurrencyEditor("setFocus");
$('.tester').igCurrencyEditor('option','value', 0);
Then when I blur out, or not sure what to do here, the valueChanged event should trigger as per the API docs (It can be raised on lost focus or on spin events).
But I can't seem to trigger the value changed event, it only works when I manually click into the input and change the number.
The valueChanging and valueChanged events would trigger when a user interaction changes the displayInput value of the editor, and the corresponding valueInput value is different from the display input one. The editors have adopted the same approach as all other Ignite UI controls where events do not trigger on API calls, because when an API call is performed, the developer can choose whether to invoke their event handler after the API call, or not.
There's two things that you can do to invoke your event handler. First one is to cache the event handler method and invoke it manually:
$('.tester').igCurrencyEditor({
...
valueChanged: valueChanged,
...
});
function valueChanged(event, ui) {
// event handler
};
$('.tester').igCurrencyEditor("setFocus");
$('.tester').igCurrencyEditor('option','value', 0);
valueChanged(null, { /* if you need arguments */ });
The second one is to extend the currency editor and override the method that performs the check whether these events should be triggered, and make it always trigger the events:
$.widget("ui.igCurrencyEditorExtension", $.ui.igCurrencyEditor, {
_processValueChanging: function (value) {
this._triggerInternalValueChange(value);
}
}
The second approach requires you to switch to using the igCurrencyEditorExtension and may cause side effects, as the method performs other checks as well.
Anyways, what Alex Marinov has suggested should work, but it depends on your editor configuration, depending on whether you've set nullValue, allow null values in the editor, etc.
you need a function like this:
function clearValue() {
$('.tester').igCurrencyEditor('option','value', "");
$('.tester').igCurrencyEditor('field').blur();
}
The result will be that the displayed value inside the currency editor is "$0.00" and the valueChanged event is fired.
I can use jquery to easily catch a change event of a select option when a user clicks it, however if javascript changes the select value, the 'change' event never triggers and needs to be manually triggered.
Is it possible to catch the value changing without manually having to trigger('change')?
Example fiddle here: https://jsfiddle.net/1fhbha4o/1/
Is it possible to catch the value changing without manually having to trigger('change')?
No. No event is fired when JavaScript code sets the value of a select. So your options are:
Have a common function you call both in response to a change event and also whenever your code changes the value (perhaps centralize changing the value so you don't forget to call it).
.trigger('change')
Polling the value to see if it changes (blech).
Re #1 and #2, you could give yourself a valWithNotify:
$.fn.valWithNotify = function(arg) {
if (arguments.length == 0) {
return this.val();
}
return this.each(function() {
$(this).val(arg).trigger("js-change"); // or just "change", but I'm not a
// fan of synthetic user events
});
};
I can't seem to access the variable defaultValue down in my .blur() function. I've tried various stuff but with no luck. So far I only get an empty object. What's wrong?
jQuery(document).ready(function(){
jQuery('#nameInput, #emailInput, #webInput').focus(function(){
var defaultValue = jQuery(this).val();
jQuery(this).val("");
})
.blur(function(defaultValue){
if(jQuery(this).val() == ""){
jQuery(this).val(defaultValue);
}
});
});
Looks like the question is about the passing data into the .blur or .focus event.
per jQuery API - http://api.jquery.com/blur/
blur( [eventData ], handler(eventObject) )
So if you want to pass data - you can send a parameter to event - which will appear as data in event object.
see this fiddle for more info
http://jsfiddle.net/dekajp/CgP2X/1/
var p = {
mydata:'my data'
};
/* p could be element or whatever */
$("#tb2").blur(p,function (e){
alert('data :'+e.data.mydata);
});
Because your code is wrong :-) you define var inside function (var defaultValue) which is then immediately wiped out.
There are two solutions: define your var as a global var before you bind blur event, or store it in the data of object liket his (which I recommend):
$(document).ready(function(){
$('#nameInput, #emailInput, #webInput').focus(function(){
$(this).val("").data('defaultValue',jQuery(this).val());
}).blur(function(defaultValue){
if($(this).val() == ""){
$(this).val($(this).data('defaultValue'));
}
});
});
It seems to me that you don't understand the basics of JavaScript.
First of all variables in JS are localized to function's scope, so you can't declare variable with var in one function and access it in other function
Second, you can't pass anything to DOM-event handler, except event-object, this is defined by the DOM specification, sometimes you can use event data parameter to the blur jQuery method.
Try this:
jQuery(document).ready(function(){
var defaultValue;
jQuery("#nameInput, #emailInput, #webInput").focus(function(){
defaultValue = jQuery(this).val();
jQuery(this).val("");
})
.blur(function(){
if(jQuery(this).val() == ""){
jQuery(this).val(defaultValue);
}
});
});
First of all, you need to distinguish blur method (function) and handler (function) which is the argument to the blur. You was trying to pass the defaultValue exactly to handler, but that can't be done. Inside handler the defaultValue would be equal eventObject, so you can do smth like console.log(defaultValue.timeStamp) and you'll see smth like 123482359734536
In your approach you can't even use event.data argument to the blur cause it will be set at the time of blur's call (attaching handler). You need to declare a var outside of the both handlers, so it will be visible to both of them
You may consider to read some comprehensive book on JS.
I read "Professional JaveScript For Webdevelopers" by Nicolas Zakas. There is a new edition
I have the following snippet:
var divCombo = new dijit.form.ComboBox({
id: "clientDivision",
name: "clientDivision.name",
value:"${project?.clientDivision?.encodeAsHTML()}",
required: "true",
store: divStore,
pageSize:"15"
},divisionNode);
divCombo.onchange = function(){
setCbHiddenId(this, 'clientDivision.id');
};
This doesnt seem to be firing the setCbHiddenId function. I change values in the divCombo combo box, and firebug never stops at my breakpoint set int he script.
What am I doing wrong exactly? I tried to define it after the fact since it needs a reference to itself in the onchange function.
Depending on your needs you could either connect the widget to a function or you can watch the widget's value (needs 1.6+).
The connect method. You'll need make sure that 'this' is the correct object. It's divCombo in this example. Also, dijits use capitalized events (onChange instead of onchange)
divCombo.connect(divCombo, 'onChange', function(newValue) {
setCbHiddenId(this, 'clientDivision.id');
});
The watch method. Again, be careful with 'this' inside functions.
divCombo.watch('value', function(property, oldValue, newValue) {
setCbHiddenId(this, 'clientDivision.id');
})
I've made a small script using some of the HTML5 files features, which allows you to select one or more files, and each time it will write the name of the file(s). Everything works as it should, only the event to detect the value change of the files input fire only once, so how can I make it fire every change and not only on the first change?
By the way, here is what I made:
http://tamir.netspot.co.il/html5/files/
If you want to upload twice, clear file input value
$('input[type="file"]').val(null);
jsfiddle test
It appears that the change event listener is being removed because you're using innerHTML to update the same element (wrapper) that the input itself is inside. So the contents of the wrapper element – including the file input – is being re-rendered, and along the way, the event listener is removed (or, rather, it's connected to an element that's no longer there).
Here's a simple jsfiddle that does exactly the same as your code, except that it prints the selected file names in a different element than the element the input is in. And it works (in WebKit, anyway)
Here's further proof (I basically copied your code, and only added a line to re-register the event listener after the modification of wrapper.innerHTML)
So, the change event does fire for each change, but the input that's being observed is removed by the use of innerHTML on the input's parent element.
I honestly don't know whether this is a legitimate browser bug or not. It makes sense for innerHTML to "overwrite" the existing input element, yet the browser is smart enough to not not reset the input's value, so you'd think listeners would stick around too… so… well, it's confusing
I'm not sure why but none of the answers to this old question are all that simple. Here's the way to do this easily today...
with jquery...
$('#myfileinputfieldid')[0].onchange = function(e) {
//do something with e. Like write an image to a canvas or make a yummy cup of coffee
e.target.value = '';
};
that's it after you have changed the value to something other than the file that was selected the next time the file input is clicked the onchange
event will fire.
Basically, if you still have a value for your input, no extra event would be fired. I'm working with react and i Had to clear the value of the input for the next event to be triggered.
Using a ref, you can do something like this.
buttonRef.current.value = null;
Instead of using onchange use oninput event
$scope.ShowIcon = function (input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#iAIcon')
.attr('src', e.target.result)
};
reader.readAsDataURL(input.files[0]);
}
}
None of the above worked for me, I actually had to create a new "dummy" file input field each time it was changed - allowing me to capture the change event again.
The process for me was:
OnChange
- move file input to another element
- create a new file input to capture the change event again
addEventListener wont work for IE8(Not sure about IE9 onwards). We need to use attachEvent listiner. If you need cross browser support then use this
if (!inputfile.addEventListener) {
inputfile.attachEvent("onclick", setCheckedValues); //IE8
}else {
inputfile.addEventListener("click", setCheckedValues, false); //Other browser
}
ok well according to #Flambino the input is being re-rendered. For whatever reason this may be, for me its irrelevant.
The $.on('change', callback) functionality is lost.
Try using .delegate function which I absolutely love!
http://api.jquery.com/delegate/
Ok so delegate is exactly the same, it just tells jquery if there is an element rendered on screen with a particular handle, attach a functionality to it.
So even if the element is re-rendered, it will still keep to function.
$(document).delegate('.file_upload_btn', 'change', function(){});
You may think this is a throw away function & say whats the difference but this has saved me a lot of time on projects.
I got the .change callback to fire on every new file by reassigning the .change function at the end of its own callback:
$('#myfileinputfieldid').change(function (event) {
scope.processFile(event.target.files[0]);
});
scope.processFile = function(fileStruct) {
doStuff;
// Reassign the onchange callback.
$('#myfileinputfieldid').change(function (event) {
scope.processFile(event.target.files[0]);
});
};
In my case i use ajax to upload file.
I just clear the value of input with onclick event handler.
$('#myFile').click(function(e) {e.target.value = '';});
$('#myFile').change(function(e) {
var file = e.target.value;
var formdata = new FormData();
formdata.append('file', file, 'somefile');
$.ajax({
type: 'POST',
url: './uploadFile',
data: formdata,
processData: false,
contentType: false,
success: function(data){
}
});
});