I'm using a select item from a django model with a onchange event to trig a JS script :
forms.py
class forms_bdc(forms.ModelForm):
[...]
bdc_description_1 = forms.ModelChoiceField(queryset=models_products.objects.values_list('product_denomination', flat=True),required=False, widget=forms.Select(attrs={'id': 'editable-select-2','onchange': 'populate_selected_product(this.id,this.value)'}),empty_label=None )
It works very well but if I'm using jquery-editable-select to transform my select item in sort of a searchable datalist, the onchange event does not trig the JS script anymore ...
Anybody knows a workaround for this ?
template.html:
<script>
function populate_selected_product(product_selectbox_id, product_selectbox_value) {
$.ajaxSetup({
data: {
product_num: product_selectbox_value,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
});
$.ajax({
type: "GET",
url: "../populate_selected_product/",
success: function (data) {
$("#div_update_row_bdc_product").html(data)
$('#'+product_selectbox_id).parent().find('#id_id_bdc').val($("#id_product_denomination").val())
}
});
}
// and here is the code to transform the select item with jquery-editable-select
$('#editable-select-2').editableSelect({effects: 'fade'});
</script>
I finally found how to do thanks to this link : https://indrimuska.github.io/jquery-editable-select/
In my example here is what I did :
$('#editable-select-2').editableSelect().on('select.editable-select',
function (e, li) {
populate_selected_product($('#editable-select-2').attr('id'),li.text())
});