Ajax callback function not being called when a dropkick styled dropdown has more than one item

Question

I have a aspx page that contains a number of dropkick styled dropdowns. Some dropdowns in the page have only one item while some dropdowns in the same page may have more than one item. Each drop down has an onchange event(javascript) that calls an Ajax function when the user selects an item in the drop down.

The Ajax function is called from the dropkick.js file

if ($option.parents('.dk_container').siblings('select').attr('type') == "AttributeValue") {

    //for changing the details of a product when the product attribute is changed
     var selectedItemValue = ''; //the value of the current
     var dropDownName = '';
     selectedItemValue = parseInt($option.attr('data-dk-dropdown-value'));
     dropDownName = $option.parents('.dk_container').siblings('select').attr('name');

     /*javascript function that calls the Ajax function */
     ChangeProductDetails(selectedItemValue, dropDownName);
            } 

The problem is that when the user selects an item in a drop down containing multiple items the Ajax function is called but the Ajax callback function is not called.

IF a drop down contains only one item then the Ajax callback function is called as expected.

Thanks in advance for any tips

Regards

Mathew

Answer 1

DropKicks looks something like this:

     $('.change').dropkick({  
     change: function (value, label) {  
     alert('You picked: ' + label + ':' + value);  
       }  
 });

The Multiselect Widget has a click event that looks like this:

  $("#multiselect").bind("multiselectclick", function(event, ui){

/* event: the original event object

 ui.value: value of the checkbox

 ui.text: text of the checkbox

 ui.checked: whether or not the input was checked

 or unchecked (boolean)

*/

});

You'll have to attach your change event logic that way

I have this for you ..Have a look at it...

EDITTED

<script type="text/javascript" src="Your-JQueryDropKick_JS_file_path"></script>

 <script type="text/javascript" language="javascript">

    $(document).ready(function () {

   // Logic Code
     $('.change').dropkick({  
         change: function (value, label) {  
         alert('You picked: ' + label + ':' + value);  
         }  
      });
    });

</script>