Jquery: select react to .click() but not to .change() - javascript

I am working with the wordpress plugin Calculated Fields Form, which uses an ajax calendar with date fields and updates the date when the user click on a given day.
I want, however, to change the date even when the user changes the month or the year.
I am trying to detect when the field for choosing the month/year (a select field) is being changed. However, I get no response to the .change() handler.
$(document).on("change", "#ui-datepicker-div select", function (event) {
console.log("change handler: new month is ", $(this).val());
});
This is never being called, even after I change the value.
Notice that: the selector is correct, as the code above works if I substitute "change" with "click". This should also cover the possibilities that the element is not yet ready, jquery not loaded properly, etc.
I am able to do anything with that element, but to change() it does not respond.
Any idea on why that may be the case? Or a turn-around way to insert some code in the moment the select field has changed?

The only possible reason could be because, there is no change event happening on the element.
Maybe your calender is not using the html select element, instead something like Jquery select2.
If so the change handler will be different based on the ui library you are using !!
please post the html code !!

After looking at the source code, I am assuming that WordPress's Calculated Fields Form is using jQuery's datepicker. In that case, to trigger the datepicker's select field, you need to use the "onSelect" option. Try and see if it helps.
$("datepicker_input_field").datepicker({
onSelect: function(dateText) {
var date = $(this).val();
var text = dateText;
console.log(date, text);
alert('Event is triggered on change');
}
});​

Related

What method to use to fire an event after datetime is selected using datetime selector UI?

I came across a datatimepicker plugin
I am trying to use it in a small app that I am working on. I need to be able to enable a button after a user selects data from the picker.
What method would use to trigger some logic after the datetime was selected
You could bind an event to your form input element to fire when it changes.
('#date').datetimepicker({
...
onChangeDateTime: function(dp,$input){
alert($input.val())
}
...
});
Within the handler function you will probably want to implement some kind check to ensure that the value is what you want it to be before enabling the button.

WooCommerce - Triggering variation select with custom select boxes

I'm trying to use FancySelect.js to style the select boxes used on WooCommerce and have managed a few but I'm struggling with the Variation form on product pages.
While FancySelect triggers a change event on the original select box, it appears to affect nothing. Looking at the javascript used in the variations form, it looks like they've unbinded the change event on the select box and are handling it some other way, by triggering events on the .variations_form instead. I can't seem to get it to work though.
My code is something along the lines of:
$('.summary select').fancySelect().on('change.fs', function() {
$(this).trigger('change.$');
$('.variations_form').trigger('woocommerce_variation_select_change');
});
I've tried triggering multiple events but none seem to have any affect.
Any ideas?
Thanks.
So it turns out that the original trigger didn't work, for reasons I can't quite work out. However, manually triggering a change event on the original select box worked to some degree, but it wouldn't update fancySelect's "Trigger" element. I think this was because the original select's options didn't get a :selected attribute (for whatever reason). I've had to add a custom event to fancySelect to manually trigger it's updateText() method.
Updated code:
$('.summary .options li').on('click', function(){
$('.summary select').trigger('change').trigger('select.fs');
});
And the additional event for fancySelect (which I'll try contribute to if I get chance):
sel.on('select.fs', function(){
updateTriggerText();
});
Cheers.

jQuery .val() doesn´t make a 'change'

I have problems testing my JavaScript. A part of my test looks like
$('#activityType').val("33");
$('#favorite').click();
The $('#activityType') is a select field and I want to select the option with value "33". Now I expected, that this would be a change, so that my function in my program like
$('body').on('change', '.item-select', function() {
var itemRow = $(this).parent().parent();
changeBookableItemInputFields(itemRow);
});
will be executed.
The $('#activityType') has got the class-attribute item-select, so I don´t understand, why $('#activityType').val("33"); is no change. I changed the value and the css-attribute is there. The body should be able to find it and the function should be executed.
Can anybody tell me, why it doesn´t work?
Changing a value with JavaScript does not trigger the events, you need to manually fire it. jQuery makes that easy with .trigger(eventName)
$('#activityType').val("33").trigger("change");
Use trigger() for calling any event using program.
change event is for user types into the input.
You can manually call the any event event using after setting the value:
$('#activityType').trigger("change");

Get the de-selected date from bootstrap datepicker

I'm trying to run two different methods when date select and de-select event changes, with enabled multidate option.
I could get the correct date on select with 'changeDate' event.
$(".calendar").on('changeDate', function(ev) {
console.log(ev.date);
});
But when I de-select the same date, it returns a wrong date for ev.date.
(Returns next or previous selected date)
Is there any way to get the correct date when it get de-selected?
As per the specs, clearDate event is fired only when clearBtn:true is enabled and you click on clear button. You can also call
$('#calendar').val('').datepicker('update');
to manually trigger the clearDate event.
I am able to get the event triggered successfully but unfortunately it is not giving any information about what date was cleared.
UPDATED SOLUTION
I have written code to maintain the date deselected by keeping the records of dates selected in changeDate event. Here is the fiddle:
http://fiddle.jshell.net/128xorks/6/

How to force the jQuery .change function to catch user selection from an autocomplete objects

I have the following text field with an auto complete feature:-
Currently I wrote the folliwng to catch what is inside a textbox :-
$("#TextBox").change(function () {
$.getJSON("#Url.Content("~/Switch/LoadRelatedIPs")", { searchterm: $("#TextBox").val(), SearchBy: $("#ChoiceTag").prop("checked") ? $("#ChoiceTag").val() : $("#ChoiceName").val(), },
function (CustomerData) {
The problem I am facing is that the $("#TextBox").val() inside the getJSON , will only catch the value already inside the text box and not what the user select from an auto complete result. For example in the above picture the $("#TextBox").val() will be v10020 instead of the full text which should be v100205 ? can anyone advice how to solve this issue ? and i do not want to use the select inside the autocomplete , since in this way i will have duplicate calls one from the .change and the other from the autocomplete select function ?
The change event fires when the textbox loses focus, which will happen when the user clicks the autocomplete suggestion, which is before the autocomplete javascript fills in the complete value. This is correct behaviour from the change event.
Seems like what you want isn't to execute your code when the Device Resource Tag field changes, but to execute it when a correct (complete) value has been entered. Possible solution: in addition to handling the select event of the autocomplete, when it performs a search, check to see if only one result is returned and it matches what the user has entered, then select that automatically. So in the example above, if the user types out the complete string "V100205", the autocomplete returns one result "V100205". Then you cancel showing the autocomplete and instead execute your code.
It is not clear what code is handling the auto complete functionality. You may need to modify your plugin or script to trigger a change event after setting the new value.
$("#TextBox").val("New Value").trigger("change");
You can also just listen for the various events which fire whenever the text in the input changes:
$('#TextBox').on('input propertychange paste', function() {
});

Categories

Resources