AJAX 当 <select> 被 multi.js 库修改时，请求未刷新 <select>

Question

我有一个 Django 表单，上面有多个 select。我正在使用 multi.js library to modify the look & feel of the multi-select. I am also using the Django Bootstrap Modal Forms 包，以便能够在没有 leaving/refreshing 页面的情况下向我的 select 列表添加新选项。

目前，当我通过模态表单添加新项目时，它是在后端添加的，但是 multi-select 不会从 JsonResponse 中更新。

如果我删除将 multi.js 功能应用到 multi-select 的代码，那么它会在模态 window 关闭时正确刷新。

根据 this issue in GitHub，我想我可能只需要触发 select 元素的更改功能，但这似乎对我不起作用。我已经尝试将 $select.trigger( 'change' ); 添加到 createQuestionModalForm 函数的最后一行，但即使在提交模态后在调试器中命中它，它似乎也没有做任何事情。

这是相关的 JS：

$('#id_questions').multi();
$(function () {
    function createQuestionModalForm() {
        $("#addQuestion").modalForm({
            formURL: "{% url 'question_create' %}",
            asyncUpdate: true,
            asyncSettings: {
                closeOnSubmit: true,
                successMessage: "test",
                dataUrl: "/projects/question_update",
                dataElementId: "#id_questions",
                dataKey: "question_select",
                addModalFormFunction: createQuestionModalForm
            }
        });
    }
    createQuestionModalForm();
});

在 AJAX 更新完成后，我可以使用任何其他技巧来强制 multi.js 插件正确显示更新后的节点吗？

Answer 1

如果您想向多表单添加新条目，您基本上必须向 select 添加新选项并发送新的更改事件。我编辑了 demo 并进行了概念验证。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo – multi.js</title>
        <base href="https://fabianlindfors.se/multijs/" target="_blank">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Include multi.js -->
        <link rel="stylesheet" type="text/css" href="multi.min.css">
        <script src="multi.min.js"></script>

        <style>
            /* Basic styling */
            body {
                font-family: sans-serif;
            }

            .container {
                box-sizing: border-box;;
                margin: 0 auto;
                max-width: 500px;
                padding: 0 20px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>multi.js</h1>
            <button class="add_test">Add Test-Element</button>
            <p>Demo of select box replacement multi.js. Available on <a href="https://github.com/Fabianlindfors/multi.js">Github</a>.</p>
            <select multiple="multiple" name="favorite_fruits" id="fruit_select">
                <option>Apple</option>
                <option>Banana</option>
                <option>Blueberry</option>
                <option>Cherry</option>
                <option>Coconut</option>
                <option>Grapefruit</option>
                <option>Kiwi</option>
                <option>Lemon</option>
                <option>Lime</option>
                <option>Mango</option>
                <option>Orange</option>
                <option>Papaya</option>
            </select>
        </div>
        
        <script>
            var select = document.getElementById( 'fruit_select' );
            multi( select, {
                search_placeholder: 'Search fruits...',
            });
        </script>
        <script>
            var counter = 1;
            
            
            var button = document.getElementsByTagName("button");
            button[0].addEventListener('click',function(e){
                var select = document.getElementById( 'fruit_select' );
                
                // Adding new Stuff 
                var newOption = document.createElement('option');
                newOption.innerHTML = 'test'+ counter;
                select.appendChild(newOption);
                counter++;
                
                // Update Multi
                select.dispatchEvent(new Event('change'));
            });
        </script>
    </body>
</html>

编辑：您可能还想尝试在 addModalFormFunction 中调度 Change-Event。我已经检查了 Github-Repo，似乎这是唯一可以在更新后触发 select 的地方。

$('#id_questions').multi();
$(function () {
    function createQuestionModalForm() {
        $('#id_questions').trigger('change');
        $("#addQuestion").modalForm({
            formURL: "{% url 'question_create' %}",
            asyncUpdate: true,
            asyncSettings: {
                closeOnSubmit: true,
                successMessage: "test",
                dataUrl: "/projects/question_update",
                dataElementId: "#id_questions",
                dataKey: "question_select",
                addModalFormFunction: createQuestionModalForm
            }
        });
    }
    createQuestionModalForm();
});

AJAX 当 <select> 被 multi.js 库修改时，请求未刷新 <select>

AJAX request is not refreshing <select> when <select> is modified by multi.js library

javascript

jquery

django

ajax

multi.js