I have a product type with Date and Time attributes. These are rendered on the Add to Cart form as select inputs and when they are changed they trigger an AJAX update of the form to show the relevant stock and price.

attribute dropdowns

Using the values in the Date select list I am rendering a jQueryUI datepicker that, when selected, will also update the Date select input.


I am using the following code to update the Date select when a date is clicked on the datepicker.

$('.form-item-attributes-field-date select').val(selected).trigger("change");

This correctly selects the option in the Date select but does not trigger the AJAX update. I have to interact with the Date select dropdown manually to trigger an update, rendering the datepicker useless. Is there something I'm missing?

I have already looked at this question that suggests I use .attr() as well as .trigger() but that doesn't make a difference.

Even when I print out console.log(settings.ajax); it tells me that the triggering event is change so I can't work out why triggering it doesn't call the AJAX update

enter image description here

This is my code

(function ($) {
    Drupal.behaviors.datePicker = {
        attach: function (context, settings) {
            // Insert datepicker div
            $('<div id="datepicker" />').insertBefore('.form-item-attributes-field-date');

            // Get array of valid dates
            var validDates = [];
            $(".form-item-attributes-field-date option").each(function () {

                dateFormat: "dd/mm/yy",
                defaultDate: $(".form-item-attributes-field-date option:selected").text(),
                beforeShowDay: function (date) {
                    var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
                    return [validDates.indexOf(string) != -1]
                onSelect: function (dateText, inst) {
                    var selected = $('.form-item-attributes-field-date option').filter(function () {
                        return $(this).html() == dateText;
                    $('.form-item-attributes-field-date select', context).val(selected).trigger("change");


I have noticed that on first page load, selecting a date in the calendar widget does not trigger the AJAX refresh. However if I trigger the AJAX refresh by actually changing the select list, then clicking dates in the calendar does trigger the AJAX. Why would this not work on first load?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.