trigger attribute AJAX using custom select element

Question

I'm currently theming the product page for a Drupal Commerce site. Our frontend developer has insisted we use his custom "fancy" select dropdown for the attributes, which is causing a bit of a theming headache!

I have implemented his jQuery successfully, and when a user changes the fancy select option, it changes the "selected" option of the hidden select element too.

The problem is that none of the Drupal AJAX calls to update the price are fired when we change the selected attribute option via jQuery.

Does anyone know how I can force the onChange AJAX call for attribute options via jQuery?

Thanks in advance!

Answer 1

I had the same problem and I managed to find the solution.

You need to call .attr and .trigger

    $('ul.choose-product-quantity li').click(function(){
      var quantity = $(this).children('.product-quantity').text();        
      $('.form-item-attributes-field-product-qty input')
      .filter(function(index){
        return $(this).attr("value") == quantity; 
      })
      .attr('checked', 'checked').trigger('change');
    });

See attached screenshot as well. Good luck. !

Custom attributes selector (image)