我有一个form
,可以通过modal
进行访问,如下面的代码所述。
我可以单击new-lesson-plan-modal
并使用生成的表单输入新的帖子条目,然后将其显示在html
上。
我的问题是,如何通过edit-lesson-plan-modal
编辑帖子条目?按钮已创建。但是我不确定如何将按钮连接到modal
,以便它将检索相关帖子条目的记录,以便在表单上进行编辑。
有什么想法吗?
Views.py
def home(request, pk=None):
if request.user.is_authenticated:
# Adding lesson plans
if 'update_lesson_plan' in request.POST:
lesson_plan_page_data = LessonPlans.objects.all()
edited_lp = NewLessonPlansForm(request.POST)
if edited_lp.is_valid():
edited_lp.save()
else: # get
# Lesson Plans Section
lesson_plan_page_data = LessonPlans.objects.all()
edited_lp = NewLessonPlansForm()
args = {
'lesson_plans': lesson_plan_page_data,
'edited_lp': edited_lp,
}
return render(request, 'static/html/home.html', args)
home.html
<div class="container-fluid">
<table class="table" id="id_view_lesson_plan">
<caption><small>Lesson Plans</small></caption>
<thead>
<tr>
<th scope="col">Level</th>
<th scope="col">Lesson</th>
<th scope="col">Description</th>
<th scope="col">
<span data-toggle="tooltip" title="Add new Lesson Plan">
<button type="button" class="btn new-lesson-plan-modal" data-toggle="modal" data-target="#lesson-plan-modal">
<i class="fas fa-plus"></i>
</button>
</span>
</th>
</tr>
</thead>
<tbody>
{% for lp in lesson_plans %}
<tr>
<td>{{ lp.level }}</td>
<td>{{ lp.lesson }}</td>
<td>{{ lp.description }}</td>
<td>
<span data-toggle="tooltip" title="Edit Lesson Plan" >
<button type="button" class="btn edit-lesson-plan-modal" data-toggle="modal" data-target="#">
<i class="far fa-edit"></i>
</button>
</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
模式部分
<!-- Modal for new_lesson_plans-->
<div class="modal fade" id="lesson-plan-modal" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">New Lesson Plan</h4>
<button type="button" class="close modal-close" data-dismiss="modal"><i class="fas fa-times"></i></button>
</div>
<div class="modal-body">
<form class="lesson-update-section" action="{% url 'home' %}" method="post">
{% csrf_token %}
<div class="form-row align-center was-validated">
<!-- New Lesson Plan Form -->
<div class="form-group col-lg-6">{{ edited_lp.level }}</div>
<div class="form-group col-lg-6">{{ edited_lp.lesson }}</div>
<div class="form-group col-lg-12">{{ edited_lp.description }}</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" id="update_lesson_plan" class="btn btn-success" name="update_lesson_plan">Submit</button>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
这将是工作流程:
<tr>
)元素。 <td>
)。这是一个带有简化代码的示例。
表格:
<!-- add an id to the row to identify it later -->
<tr id="lesson-{{ lp.pk }}">
<!-- add a class to the column to identify it later -->
<td class="lesson-level">{{ lp.level }}</td>
<td>
<button class="edit-lesson-plan-modal" data-row="#lesson-{{ lp.pk }}"></button>
</td>
</tr>
模式:
...
<div class="modal-body">
...
<!-- add an id to the input fields to identify it later -->
<input type="text" id="lesson-level-edit-input">
</div>
...
Javascript:
$('.edit-lesson-plan-modal').on('click', function() {
// get the parent row's id
var rowId = $(this).attr('data-row');
// get the parent row element
var row = $(rowId);
// get the lp.level data
// below `.lesson-level` is the class of the column
var lessonLevel = row.children('.lesson-level')[0].innerText();
// populate the input field
// below `#lesson-level-edit-input` is the id of the input
$('#lesson-level-edit-input').val(lessonLevel);
// open the modal
$('#lesson-plan-modal').show();
});