I'm confused by this line in my project:
This id: categories-product belong to <select> and I've seen in project someone wrote this: And I'm wondering what this basically means ?
$('#categories-product').val(product.category.id).trigger('change');
Please could anyone explain me this?
Thanks
Most jQuery methods provide chaining by returning this (which is the jQuery set you called the method on). This is an absolutely key part of the jQuery API. val is one of those methods. So that code is doing this:
$('#categories-product').val(product.category.id);
$('#categories-product').trigger('change');
...but without having to look up the element a second time.
So it's setting the value of the select, and then triggering the change event on it (presumably so handlers for that event do something).
trigger('change') will actually allow the javascript runtime to execute the change event for the element. If you have associated any change event to that element then this will allow to explicitly trigger that change event.
Actually, the work of trigger() is to just execute all handlers and behaviours attached to the matched elements for the given event type. And specifying the event name as a parameter will only trigger that event. Like,
trigger('change') //triggers the change event listener only
trigger('click') //triggers the click event listener only
So, your code
('#categories-product').val(product.category.id).trigger('change');
Will set the value of the #categories-product and then this will explicitly trigger the change event so that the change action that is associated with this element is executed.
To understand it better you can break this line in 2 statements
$('#categories-product').val(product.category.id);
$('#categories-product').trigger('change');
Now, it is clear that the first line sets the value and second line triggers the change event. The above is just a shorthand way of clubbing the statements into one statement.
There must be a drop down i-e select tag in your DOM with id as categories-product.
And
$('#categories-product').val(product.category.id).trigger('change');
is setting some value as selected value and then triggering a change event so that if there is any listener added for change event on that selector, the callback should be executed
It is called Chaining in Jquery, find more details at Jquery Chaining. It is equivalent to
$('#categories-product').val(product.category.id);
$('#categories-product')..trigger('change');
Related
I need to track change in CodeMirror editor. So I implemented:
CodeMirrorInstance.on("change", function(CodeMirrorInstance){
$scope.onChangeFunc(CodeMirrorInstance);
} );
In onChangeFunc I do insert based on condition new value using
CodeMirrorInstance.setValue(newCode);
Apparently it leads to infinite loop. How to break this vicious circle?
setValue will always trigger another "change" event (it changes the content, after all). You'll have to make your change handler clever enough to not cause additional changes for changes you yourself caused. Looking at the origin property of the second argument passed to the "change" event handler might work -- it contains a sting that identifies the source of the change, which will be "setValue" when setValue was called.
I want to know how to trigger the onClick event of any select(html combobox element).
I tried to do $('#MySelect').click(); using jQuery and tried document.getElementById('MySelect').click(); using pure javascript.
But the two don't fire the dropdown event that have the options of the select.
Ps: i have sure that selector $('#MySelect') exists.
are you looking for this
document.getElementById("MySelect").selectedIndex=3;
Programatically triggering a click event will only run the defined click handler for that element. As you say in the comments, you have no such method defined, therefore no action will take place.
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.
I'm working with an existing system set up by someone else (no longer here). In this system, clicking on the text within a special <span> will trigger a js function which will replace the text with an <input> field. The text which was there is assigned as the value of the <input> element.
An onblur event is assigned to this new <input> field. This calls a function which updates the data in the database via an AJAX call. As part of this action, the <input> field is replaced with the new value (same <span> contents), and the onclick event is re-assigned. In this way, you can click on the text, change it, click elsewhere, and it is automatically updated in the database. Then you can do it again as it sets up the original events dynamically with each update.
It is in-between the first event and the second that I want access to that <input> field. I want to add a jquery .datepicker() to it.
How would I go about calling .datepicker() on a dynamically-created element?
No, there isn't an event similar to an onCreate. The closest you can find is jQuery's .live(). This allows you to bind an event to an element now or in the future. I also think it will probably solve your problem.
http://api.jquery.com/live/
$('input').live('click', function() {
$(this).datepicker();
});
As AutoSponge handily pointed out, live is deprecated as of jQuery 1.7. They suggest using on or delegate instead.
http://api.jquery.com/on/
http://api.jquery.com/delegate/
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.