时间戳

首页 > 解决方案 > AJAX 请求不刷新由 multi.js 库修改

javascript - AJAX 请求不刷新由 multi.js 库修改

问题描述

我有一个带有多选功能的 Django 表单。我正在使用multi.js库来修改多选的外观。我还在使用Django Bootstrap 模态表单包，以便能够在我的选择列表中添加新选项，而无需离开/刷新页面。

目前，当我通过模态表单添加新项目时，它会添加到后端，但多选不会从 JsonResponse 中更新。

如果我删除了将 multi.js 功能应用于多选的代码，那么当模式窗口关闭时它会正确刷新。

根据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 插件正确显示更新的节点吗？

标签： javascriptjquerydjangoajaxmulti.js

解决方案

如果要向多表单添加新条目，则基本上必须向选择添加新选项并调度新的更改事件。我已经编辑了演示并进行了概念验证。

<!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，看来这是您在更新后唯一可以触发选择的地方。

$('#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();
});

推荐阅读