Django modal bootstrap Async с обновлением списка выбора

Я пытаюсь реализовать bootstrap-модал в моем приложении django, который позволяет моему пользователю создать новый элемент, который он может затем выбрать в выбранном html-списке.

Я успешно реализовал способ создания списка select с помощью selectize и запроса всех названий в моей БД (функция GetTitles). И мне удалось создать новый заголовок через модальное окно, используя django bootstrap modal async (без переадресации - $("#title-modal").modalForm...)

Однако теперь мне нужно убедиться, что созданный новый заголовок добавлен в список выбора. Поскольку заголовок уже находится в базе данных, я подумал о том, чтобы вызвать функцию GetTitles снова при отправке модала. Я пытался сделать это, используя параметр addModalFormFunction: GetTitles, но это не работает... так что я определенно делаю что-то неправильно... верно?

<div id="title_div" style="margin-top: 20px;">
            <label for="id_title" style="margin-bottom: 5px;" class="lead">Title</label><br/>
            <select class="" name="title" required="" id="id_title" multiple=""></select>
        </div>

 $(document).ready(function() {
        function GetTitles(){
            $.ajax({
            url: "{% url 'action:GetTitles' %}",
            type: 'GET',
            data: {
                csrfmiddlewaretoken: "{{ csrf_token }}",
                user:"{{ request.user.id }}",
            },
            error: function(err) { console.log(err); },

            success: function(options) {
                $('#id_title').selectize({
                    valueField: 'id',
                    labelField: 'title_name',
                    searchField: 'title_name',
                    maxItems: 3,
                    preload: true,
                    options: options,
                    create: true,
                    plugins: ['remove_button'],
                    create: function(input) {
                        $("#title-modal").click();
                        return {
                            'value': null,
                            'text': null
                        };
                        },
                });
                {% for title in form.instance.title.all %}
                    $('#id_title')[0].selectize.addItem("{{ title.id }}");
                {% endfor %}

                }
            });
        }
        GetTitles()

        $("#title-modal").modalForm({
                formURL: "{% url 'action:NewTitleModal' %}",
                asyncUpdate: true,
                asyncSettings: {
                    closeOnSubmit: true,
                    successMessage: 'success',
                    dataUrl: "{% url 'action:GetTitles' %}",
                    dataElementId: "#id_title",
                    dataKey: '1',
                    addModalFormFunction: GetTitles
                }
            });

    })

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