JQuery editable select after Ajax call in Django

I'm using JQuery editable select in a Django project to make select widgets searchable.

When I'm calling another template containing selectboxes with Ajax, the script won't apply unless I use :

$.getScript("https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js").then(() => {}

The problem is that it makes the rendering of the Ajax very slow and random.

Is there a way to cache the script in the parent template and load it only once so I can reuse it when I'm rendering the child template ?

Here is my AJAX call on parent template :

                $.ajaxSetup(
                            {
                        data: {select_update_record_project_id: sales_documents_id ,
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                        },
                });
                $.ajax({
                    type: "GET",
                    url: "/my_url/",
                    cache: true, // I have tried both true and false
                    beforeSend: function(){ 
                        $('#div_master_sales_documents_edit').empty()
                        
                    },
                    success: function (data) {

                        $.getScript("https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js").then(() => {
                            $("#div_master_sales_documents_edit").html(data);
                        });
                    }
                });
            }

Here is my child template rendered after Ajax call :

    <select id="sales_documents_editable_select_description_1"></select>
    <select id="sales_documents_editable_select_description_2"></select>
    <select id="sales_documents_editable_select_description_3"></select>
    
    
    
    <script>
// this is where you apply the editable-select to select widgets
    
         var list_selectbox_ids = ['sales_documents_editable_select_description_1','sales_documents_editable_select_description_2','sales_documents_editable_select_description_3'];
                
                for (let i = 0; i < list_selectbox_ids.length; i++) {
                    $('#' + list_selectbox_ids[i]).editableSelect({effects: 'fade'}).on('select.editable-select', function (e, li) {
                        populate_sales_documents_selected_product($('#' + list_selectbox_ids[i]).attr('id'), li.text(), li.val())
                    });
                }
    </script>

Вернуться на верх