如何在模式中编辑表单条目

Question

我有一个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>

Answer 1

这将是工作流程：

1. 用户点击编辑按钮。
2. 您从 javascript 中监控 click 事件，以确定单击了哪个按钮。
3. 然后您会找到它的父行 (<tr>) 元素。
4. 然后您会找到该行的子列 (<td>)。
5. 然后您可以从这些元素中找到数据。
6. 然后填充模态输入。

这是一个简化代码的示例。

表：

<!-- 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();
});