Django AJAX 表单和 Select2

Question

我正在使用 AJAX 在我的网站上呈现一个表单（查看下方）

def add_property_and_valuation(request):
    """
    A view to return an ajax response with add property & valuation form
    """

    data = dict()

    form = PropertyForm()

    context = {"form": form}
    data["html_modal"] = render_to_string(
        "properties/stages/add_property_and_valuation_modal.html",
        context,
        request=request,
    )
    return JsonResponse(data)

使用以下 JQuery 代码单击按钮时的表单和模态呈现：

$(".js-add-property").click(function () {
        var instance = $(this);
        $.ajax({
            url: instance.attr("data-url"),
            type: 'get',
            dataType: 'json',
            beforeSend: function () {
                $("#base-large-modal").modal("show");
            },
            success: function (data) {
                $("#base-large-modal .modal-dialog").html(data.html_modal);
            }
        });
    });

我遇到的问题是我正在尝试使用 Select2，并且因为在 DOM 加载 Select2 后呈现表单，所以 Select2 无法正常工作。有没有人有办法解决这个问题？注意 DOM 更改并启用 Select2?

非常感谢

Answer 1

这就是所谓的select2初始化，你可以把这段代码放在你的jQueryAJAX方法的成功回调中。

只是不要忘记将 my_select_element 替换为表单中输入元素的 id 或 class name，无论您想要触发 select2.

// here "my_select_element" is the "id" of your HTML form input element where you want to apply select2.
$('#my_select_element').select2();

为简单起见，我将整个 AJAX 代码放在下面-

$(".js-add-property").click(function () {
    var instance = $(this);
    $.ajax({
        url: instance.attr("data-url"),
        type: 'get',
        dataType: 'json',
        beforeSend: function () {
            $("#base-large-modal").modal("show");
        },
        success: function (data) {
            $("#base-large-modal .modal-dialog").html(data.html_modal);

            // Initialize the select2 on newly rendered form
            // here "my_select_element" is the "id" of your HTML form input element where you want to apply select2.
            $('#my_select_element').select2();

        }
    });
});

Django AJAX 表单和 Select2

Django AJAX form and Select2

django

django-templates

jquery-select2