【发布时间】：2019-05-15 15:18:35
【问题描述】：
我正在尝试为我的日历中的新任务创建一个弹出表单，但我从来没有让它工作。我为此目的使用 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>
日历.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">×</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>
新任务按钮一直没有响应！！！ '''''''''''''''''''''''''''''''''''''''''''
【问题讨论】：
-
您是否确认正在调用点击处理程序？如果是，那么对
/task/create的请求是否被提出？如果有，它会如何反应？调试时，选择一个开始的地方，通常从一端开始，然后开始消除可能性，同时避免做出任何假设。 -
“从未回应”是什么意思？你看到模态了吗？还是什么都没有？此外，您的表单处于模式中，因此您无法在 ajax 调用中弹出模式。您应该只打开模式。当用户提交表单 (
.on('submit')) 时，执行 ajax 调用。应该是 POST 而不是 GET。 -
你的按钮里面什么都没有写，它只是一个小盒子，你怎么点击它。如果您能够以某种方式单击它，则在单击处理程序中添加
console.log以确保单击按钮时该函数正在运行。如果它正在工作，请在 ajax 调用的成功或失败中写入一些 console.log，以确保它从服务器获取正确的数据。这就是你调试 js 代码的方式，添加大量控制台日志以找出代码的哪一部分在何时运行。问题解决后不要忘记删除它们。 -
另外，您正试图将从 ajax 调用收到的 html 放入
#modal-task .modal-content但您的 html 中不存在此类元素，我认为 jquery 在此类情况下不会引发任何错误，它只是随便。 -
当我点击什么都没有发生。