django - 依赖/链式下拉列表在模式下不起作用

Question

我试图在 ajax （https://cutt.ly/MyVQE74）的帮助下在 Django 中使用依赖/链式下拉列表，就像如果我选择一家公司，那么只有那个公司部门才会出现在模式中。它在搜索功能的主页上工作，但在发布数据时不能在模式部分工作。

模型部分

class Item(models.Model):

    item_name = models.CharField(max_length=255, blank =True)
    description = models.CharField(max_length=255, blank=True, null=True)
    company = models.ForeignKey(Company, on_delete = models.CASCADE)
    department = models.ForeignKey(Department, on_delete = models.CASCADE)
    employee = models.ForeignKey(Employee, on_delete = models.CASCADE)

view_part

def save_item_form(request, form, template_name):

    data = dict()
    if request.method == 'POST':
        if form.is_valid():
            form.save()
            data['form_is_valid'] = True
            items = Item.objects.all()
            data['html_item_list'] = render_to_string('item/includes/partial_item_list.html', {
                'items': items
            })
        else:
            data['form_is_valid'] = False
    context = {'form': form}
    data['html_form'] = render_to_string(
        template_name, context, request=request)
    return JsonResponse(data)


def item_create(request):
    if request.method == 'POST':
        form = ItemForm(request.POST)
    else:
        form = ItemForm()
    return save_item_form(request, form, 'item/includes/partial_item_create.html')

def load_department(request):

    company_id = request.GET.get('company')
    departments= Department.objects.filter(company_id=company_id).order_by('name')
    context={'departments':departments}
    return render(request,'item/department_drop_down.html',context)



def load_employees(request):
    department_id =request.GET.get('department')
    employees = Employee.objects.filter(department_id=department_id).order_by('name')
    context={'employees':employees}
    return render(request,'item/employee_drop_down.html',context)

模板视图（使用模态）：

名称：partial_create_form.html

<form method="post" action="{% url 'item_create' %}" class="js-item-create-form" id="itemForm" data-departments-url="{% url 'ajax_load_departments'%}" data-employees-url="{% url 'ajax_load_employees'%}" >
    {% csrf_token %}
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Create a new Item</h4>
    </div>
    <div class="modal-body">
        {% include 'item/includes/partial_item_form.html' %}
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Create Item</button>
    </div>
</form>

<script>

    $(document).on('click', '#id_company', function() {
        var url = $("#itemForm").attr("data-departments-url");
        var companyId = $(this).val();
        console.log(companyId)
        $.ajax({
    url: url,
            data: {
    'company': companyId
            },
            success: function(data) {
    $("#id_department").html(data);
            }
        });

    });

$(document).on('click', '#id_department', function() {
    var url = $("#itemForm").attr("data-employees-url");
    var departmentId = $(this).val();
    console.log(departmentId)
    $.ajax({
url: url,
        data: {
'department': departmentId
        },
        success: function(data) {
$("#id_employee").html(data);
        }
    });

});

</script>

-------------------------------------------------- -------------------------------------------------

名称：partial_item_form.html

{% for field in form %}
    <div class="form-group{% if field.errors %} has-error{% endif %}">

        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {% render_field field class="form-control" %}
        {% for error in field.errors %}
            <p class="help-block">{{ error }}</p>
        {% endfor %}

    </div>

{% endfor %}

标签： djangoajaxbootstrap-modal