Add option to Enhanced dropdown

[teoyh]

I have 2 dropdowns in my form. The database for the spare parts is found in SAP.

Car Model : (First dropdown)
Spare Parts : (2nd dropdown)

When user select car model, it will then go an pull the spare parts from SAP

In the first dropdown , i have added a javascript event change, purpose is to return the spare parts from SAP base on the model user select.

carmodel = Fabrik.getBlock('form_436').formElements.get('car_info_model').getValue();
var url='index.php?option=com_fabrik&format=raw&task=plugin.userAjax';
new Request({url:url,
data:{method:'GetComponents',
'carmodel':carmodel},
onComplete:function(r){
if(r!==''){
results = r.split(",");
var select = document.getElementById("car_info_component");
select.empty();
for(var i = 0; i < results.length; i++) {
var opt = results;
if(opt!==''){
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}

The above work fine is i dont set the 2nd dropdown to enhanced dropdown. But i need to when the list of spare parts get very long.

When i turn on the enhanced dropdown, the list of spare will no long appear inside the enhanced dropdown.

I suspect the javascript for adding the spare part is not correct for the enhanced dropdown

Can someone help me to correct my javascript for the part to add option to the enhanced dropdown.

Thank you in advance

 

[cheesegrits]

You have to trigger the update event for the 'chosen' (enhanced dropdown) object. The jQuery module (chosen) that provides the enhanced dropdowns creates it's own DOM element, and hides the actual dropdown select element. If you update the original select yourself, you have to tell chosen that it has been updated by firing the 'liszt:updated' event on it, so chosen can then rebuild its element ... which in your case I think would be ...

jQuery(select).trigger('liszt:updated');

-- hugh

 

[teoyh]

You have to trigger the update event for the 'chosen' (enhanced dropdown) object. The jQuery module (chosen) that provides the enhanced dropdowns creates it's own DOM element, and hides the actual dropdown select element. If you update the original select yourself, you have to tell chosen that it has been updated by firing the 'liszt:updated' event on it, so chosen can then rebuild its element ... which in your case I think would be ...

jQuery(select).trigger('liszt:updated');

-- hugh

Wow thanks a million ....wow like a charm