Question

我正在尝试为日历中的“新任务”创建一个弹出表单，但是我从未使它起作用。我正在为此目的使用Ajax。这是我的代码。 Ajax位于静态文件夹中，名称为“ plugin.js”

base.py

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bookstore</title>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      {% block content %}
      {% endblock %}
    </div>
    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/plugin.js' %}"></script>
    {% block javascript %}
    {% endblock %}
  </body>
</html>

calendar.html

{% extends 'cal/base.html' %}

{% block title %}
Quality Assurance Calendar
{% endblock %}

{% block content %}
<div class="clearfix">
    <a class="btn btn-info left" href="{% url 'cal:calendar' %}?{{ prev_month }}"> Previous Month </a>
    <a class="btn btn-info right" href="{% url 'cal:calendar' %}?{{ next_month }}"> Next Month </a>
 {% if user.is_authenticated %}


    <button type="button" class="btn btn-primary show-form">
        <span class="glyphicon glyphicon-plus"></span>
      New Task
    </button>

{% endif %}


</div>

{{ calendar }}

<div class="modal-fad" id="modal-task">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
</div>
{% endblock %}

view.py的一部分

    def task_create(request, task_id=None):
    # if not request.user.is_authenticated:
    #     return redirect('%s?next=%s' % ('account/login/', request.path))
    instance = Task()
    if task_id:
        instance = get_object_or_404(Task, pk=task_id)
    else:
        instance = Task()

    form = TaskForm(request.POST or None, instance=instance)
    # form.user = request.user
    if request.POST and form.is_valid():
        # form = form.save(commit=False)
        # form.user = request.user
        form.save()
    #     return HttpResponseRedirect(reverse('cal:calendar'))
    # return render(request, 'cal/task_create.html', {'form': form})
    html_form=render_to_string('cal/task_create.html', {'form': form}, request=request)
    return JsonResponse({'html_form':html_form})

还有plugin.js

    $(document).ready(function(){
    $('.show-form').click(function(){
        $.ajax({
            url: '/task/create',
            type: 'get',
            dataType:'json',
            beforeSend: function(){
                $('#modal-task').modal('show');
            },
            success: function(data){
                $('#modal-task .modal-content').html(data.html_form);
            }
    })

})

task_create.html

 {% load crispy_forms_tags %}
<button class="btn btn-primary show-form" data-url="{% url 'cal:task_create' %}"></button>
        {% csrf_token %}
        <!-- Modal Header -->
        <div class="modal-header">
        <h5 class="modal-title">Create Task</h5>
        <button type="button" class="close" data-dismiss="modal" aria-lable ="Close">
            <span aria-hidden="True">&times;</span>
        </button>
        </div>

        {{ form|crispy}}
        <div class="modal-body">
        Modal body..
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" >Save changes</button>
        </div>
</form>

新任务按钮从未响应！！！ '''''''''''''''''''''''''''''''''''''''

Answer 1

整理出来。我已经在本教程中得到了我需要的一切这是链接（https://simpleisbetterthancomplex.com/tutorial/2016/08/29/how-to-work-with-ajax-request-with-django.html）

感谢所有人的宝贵意见。

如何使Django-ajax弹出按钮正常工作？

1 个答案: