Как редактировать запись формы в модале

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. Вы отслеживаете событие click из javascript, чтобы определить, какая кнопка была нажата.
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();
});