我正在用Django建立待办网站。我使用模态,以便用户可以创建事件。该事件是一个按钮,因此当用户单击它时,它将显示一个带有事件信息的模式。我通过将主键传递给url来实现。但是,什么也不显示。
当我手动转到/ view /(event-pk)时,主键也不起作用。我认为这与data-id="{% url 'view-event' event.pk %}"
有关,但是一切看起来都不错。我是Django的新手,所以很抱歉这是一个简单的问题。
显示事件div的HTML:
<div class="col-md-6 inline mb-4">
<h3 class="ml-1">Events:</h3>
<div class="events-content-section ml-2">
{% for event in events %}
<div class="mb-2" style="display: flex; align-items: center;">
<button type="button" class="view-event btn btn-light" style="width: 100%;" data-id="{% url 'view-event' event.pk %}">
<span>
<h4 style="float: left;">{{ event.title|truncatechars:29 }}</h4>
<button type="button" class="update-event btn btn-sm btn-info ml-1" data-id="{% url 'update-event' event.pk %}" style="float: right;">
<span class="fas fa-edit"></span>
</button>
<button type="button" class="delete-event btn btn-sm btn-danger mr-2 ml-2" data-id="{% url 'delete-event' event.pk %}" style="float: right;">
<span class="fa fa-trash"></span>
</button>
</span>
</button>
</div>
{% endfor %}
</div>
</div>
模式按钮的JavaScript(甚至很重要):
$(document).ready(function() {
$(".create-event").modalForm({
formURL: "{% url 'new-event' %}"
});
});
视图的HTML:
{% load bootstrap4 %}
{% load static %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{% load widget_tweaks %}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Custom Stylesheet -->
<link rel="stylesheet" type="text/css" href="{% static 'main/main.css' %}">
</head>
<body>
<div class="modal-header">
<h3 class="modal-title">{{ event.title }}</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="">
Description:
{{ event.description }}
</div>
<div class="">
Start Time:
{{ event.start_time }}
</div>
<div class="">
End Time:
{{ event.end_time }}
</div>
<div class="">
Remind Time:
{{ event.remind_time }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</body>
</html>
Urls.py
urlpatterns = [
path('', home, name='app-home'),
path('new_event/', EventCreateView.as_view(), name='new-event'),
path('update/<int:pk>/', EventUpdateView.as_view(), name='update-event'),
path('view/<int:pk>/', EventReadView.as_view(), name='view-event'),
path('delete/<int:pk>/', EventDeleteView.as_view(), name='delete-event'),
path('calendar/', calendar_view, name='calendar'),
]
Views.py
class EventReadView(BSModalReadView):
model = ToDoItem
template_name = 'main/todoitem_view.html'
我希望事件通过data-id传递并显示在视图上,因此请填写描述,开始时间等。
至于使用data-id的js,我使用django bootstrap modal forms,因此安装的应用程序可以处理所有事情。