jQuery Preselection of Dropdown Doesn't Enter Change() Function - javascript

Suppose I have
$('#myDropdown').change (function() {
// perform some action based on some logic for the selection
});
// Preselect a certain value on startup
$('#myDropdown').val('Item 3');
When I preselect like that, the Change event never gets called, so I don't get my results.
I can certainly make the manual changes required to accompany the selection of 'Item 3' on startup but I wish everything could be as generic as possible.

the change event will fire only if a change to the element's value is committed by the user.
So you might need to trigger or call change() manually

Make sure to preselect the value after it becomes available.
$( document ).ready(function() {
// Preselect a certain value on startup
$('#myDropdown').val('Item 3');
});

Are you using a jQuery dropdown plugin, or you use the html , if you could put more codes, will be helpful.

Related

How can I get notified when the timezone-picker value is changed?

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.

Setting up a callback for the DatetimepickerBundle

I use the DatetimepickerBundle in my Symfony project. In one form I have two date fields, start and end. I want the end field to update automatically when the start field is changed, so the user doesn't have to select the date again, since most events will have their start and end on the same day.
The Bundle is based on the bootstrap-datetimepicker by smalot and generates the following javascript for each field:
jQuery(document).ready(function($) {
$field = $('#app_bundle_event_start');
$field.datetimepicker({"formatter":"js","format":"dd.mm.yyyy hh:ii","autoclose":true,"language":"de"});
});
I added the following code in the template, but it doesn't do anything.
jQuery(document).ready(function($) {
$('#app_bundle_event_start').datetimepicker().on('changeDate', function(ev){
$('#app_bundle_event_end').datetimepicker('update', ev.date);
});
}
If I don't wrap it in the document-ready callback, the end-date is updated, but on the start-date field the datetimepicker is re-initialized and loses all its options.
How can I add this event callback to an already initialized datetimepicker?
I believe, although I am not 100% sure, that .on() actually belongs to standard jQuery event. Basically, you do not need to call datepicker() again.
So, to attach callback to already initialized Datepicker just do:
$('#app_bundle_event_start').on('changeDate', function(ev){
$('#app_bundle_event_end').datetimepicker('update', ev.date);
});
Is this what you wanted to achieve?

Which event used in jquery when textbox value get changed using code not by manually?

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
}

onchange wont fire after programmatically changing html select dropdown

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.

set event on dynamically changed data in field via jquery

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.

Categories