I have several field
$("#a1").change(function(){
console.log('fire'); });
but when value change not user event not work
form[0].val = 100;
event not work
how can i catch this change data ?
ps data changes from different places not my code suggestions like trigger('change') not good idea
I do not think that events will fire when you set the value in that fashion.
Does it work when you set the value of the element in the browser?
What you can do is call form[0].change(), and it should work.
Changing the value property will not fire the change event.
In fact, your code should be changing value and not val.
You could call it explicitly after updating it.
form[0].value = 100;
form.change();
But you mention that is not an option.
The only other way is to poll for changes.
You could define a way of working with the controls inside your form. Create a javascript function that external developers can call to set the value of a given field and make them use that method. Then you can fire change or do whatever you want to your hearts content.
Related
I'm using timezone-picker to pick my timezones, and so far it's working great.
However, the one problem is that I can't convince it to tell me when the value is changed by using one of the quickLink buttons.
You can try this by going to the demo and sticking this code in your console:
jQuery("#map select").on("change", function(){
console.log(jQuery('#map').data('timezonePicker').getValue()[0]);
});
If you do that, you'll see that changing the value via dropdown works just fine, but if you use the buttons to the right of the dropdown, it won't fire the handler. I'm guessing that's because the code isn't calling .trigger when it sets the value, and yeah I could probably modify the Javascript myself but that seems like the wrong thing to do... is there any other way to get notified when this value changes?
You could hook to the map:clicked events (as defined diggin' in to the source code).
Check this code in the demo page:
jQuery("#map").on("map:clicked", function(){
console.log(jQuery('#map').data('timezonePicker').getValue()[0]);
});
The only difference is that you need to hook it to the initialization element (#map). There is no trigger on the main select element. The defined binded event is map:clicked. It will execute each time you change the selected option, click on the map or select one of the quick links.
Hope it helps.
I am developing a application in MVC.
I have a view which contain another partial view.
I have textbox1 in a parent view but its value get assigned from partial view.
Now, the moment the Textbox1 get assigned with some value, I want to perform some action
like put the 10% value textbox1 value on the another textbox, textbox2 of the view.
( I want the event when textbox value get changed by code, not the manual entry.
so cant use blur() event. )
which event in jquery should I used to perform this task ?
Partials views are all processed server-side, where Javascript is not executed. Javascript only works with the full page and does not know anything about partials, so take this worry out of your question.
As already been mentioned, you need .change() and if that is not good enough, just create a function that updates value of your checkbox and do other stuff which you need doing.
//psudo-code using .trigger()
function updateTextbox(value){
$('#myTexboxId').val(value);
$('#myTexboxId').trigger('change');
}
And here another method where you create another function that updates your values and does the calculation for you.
//pseudo-code using another function
function updateMyTextbox(value){
$('#myTextboxId').val(value);
doCalculation();
}
$('#myTextBoxId').on('change',function(){
doCalculation();
});
function doCalculation(){
// update your other values
}
I have a select inside HTML
<select id="league" name="league">
which I'm listening for changes inside my javascript.
var league = dojo.byId("league");
dojo.connect(league, "onchange", function (evt) { //do stuff }
Which works fine.
However I have a link that I can click which updates the select:
League
The link works as it updates the selected value of the select with the following function.
function updateSelection(NewLeague){
dojo.byId('league').value = NewLeague; // works
dojo.byId('league').onChange; //this isnt working
//dojo.byId('league').onChange(); //this throws: TypeError: dojo.byId("league").onChange is not a function
}
My problem, as I've read through other stack posts is that programmatically updating the value wont trigger onChange, thus I need to call onchange in the code (shown above). As per the comments inline, the onChange isn't being triggered or throws an error. My first thought that it has something to do with the dojo.Connect which listens for onChange, but I havent found any information that says I cant do this, nor any explanation how to get around it.
Any ideas?
Select onchange doesn't fire for programattic changes, you need to fire it yourself with league.onchange();
As noted by #Greg, the call should be lowercase.
Additionally, I don't know if dojo has a trigger method, but in jQuery this would be done as jQuery('#league').trigger('change').
Depending on your version of dojo you may also want to check: http://dojotoolkit.org/reference-guide/1.8/dojo/connect.html
Have you tried just calling the select by it's id using normal js?
document.getElementById('league').onchange.call();
As others have said, you need to trigger the event yourself, just setting the value does not do that. See the code on How to trigger event in JavaScript? to see how in a cross-browser way.
Is there a way to detect when the value of a select list is set to empty by a javasscript and not by the user? It seems that the change-event only triggers by mouse or keyboard.
And is there a way to detect when the number of options in a select list changes (added, removed)?
You have to trigger the change event manually, when you are changing the value of a select with javascript. E.g:
$('#myselect').val(10).change();
In this example the value is set to 10 and the change event is triggered. If there is an event handler attached to the select, it will be executed.
Use Jquery's change function
$("#idofselect").change(function(){ });
To answer your first question, not it's not possible to detect what caused the change in the select list in the change event itself.
However, if there is javascript code changing the select list you could add some logic in there to perform the tasks needed in this scenario.
I have some JavaScript/jQuery code that watches for the "changed" event on a checkbox:
$(control).change(function() {
alert("changed to: " + $(this).is(":checked"));
});
This works fine.
I'd like to create a reference to the change() function on the particular object, and call it indirectly, like so:
var onSomeChange = $(control).change;
onSomeChange(function() {
alert("changed to: " + $(this).is(":checked"));
});
I need to call it indirectly because I'll want to switch the method I'm assigning to onSomeChange with a different one, depending on the circumstances. (The single assignment to onSomeChange is just here for illustration).
This doesn't work. In Firebug I get this error:
this.bind is not a function
How can I get a reference to an object's method and call it without calling it from the object directly?
Background
The context may be significant; if there's an entirely different way to do what I want, that's fine too.
The behavior of the change event in JavaScript is a bit different for check boxes and radio buttons. A check box fires change whenever its state changes (checked or unchecked). However, radio buttons (in Firefox at least; I think it's even more complicated in other browsers) only fire a change for the radio button group as a whole. That's understandable, but I want to bind different actions to the states of the individual radio buttons. (Specifically, I want to potentially hide or show certain divs depending on the radio button states).
I think I can handle the event discrepancies by binding a custom event to each radio and then triggering it based on a change in the group. So I have extended jQuery to add a radioChange() method. This method
Now, I'd like to swap out this code with something that calls a different event-handling method depending on the type of the control. (Aside: it's because radio button seem to be handled differently than check boxes, so I have a different radio-button-specific event). I've added a radioChanged() extension method to jQuery to support this.
Now I want to have a method that registers a listener to either changed() or radioChanged() depending on the type of the object. Determining that is easy:
var change = $(control).is(":radio") ? $(control).radioChange : $(control).change;
The problem is that I can't actually call the method at the change reference without generating the error above.
Is there something else I should be doing to make this work?
Answer to original question:
You need to apply it on a object which has bind as prototype. probably enough to just pass $(control) as object in question, or perhaps $ is enough.
var $control = $(control);
var change = $control.change;
change.call( $control,
function() {
alert("changed to: " + $(this).is(":checked"));
}
);
sounds like you just need to call the bind event and pass it the targeted event string
$(control).bind($(control).is(":radio") ? "radioChange", "change", function () {});