Всплывающее окно на html странице, как передать в него данные?

Question

[s_stepashka]

На страницу выводится таблица с записями из базы данных и хочется при клике на ссылку "изменить", чтобы появлялось всплывающее окно, с формой для редактирования именно данной записи. На данный момент всплывающее окно появляется, но в полях "номер узла" и "номер стыка" всегда выводятся данные ПЕРВОЙ записи, а не текущей. Подскажите пожалуйста в чём ошибка?

{% extends "base.html" %}
{% block title %}Редактирование информации о линии{% endblock title %}
{% block leftcolumn %}<p><a href="/main_table">Возврат к рабочей таблице</a></p>{% endblock leftcolumn %}
{% block rightcolumn %}
                <form method="POST">
                    {% csrf_token %}
                            <p>
                                {% if full_lines_info_table.count > 0 %}
                                <h2>Информация по линии</h2>
                                <table border="">
                                    <tr><th>Id</th><th>Наименование линии</th><th>Узел</th><th>Стык</th><th>Сварщик</th></tr>
                                    {% for line1 in full_lines_info_table %}
                                        <tr><td align="center">{{ line1.id }}</td>
                                            <td>{{ line1.name_of_line }}</td>
                                            <td align="center">{{ line1.uzel_number }}</td>
                                            <td align="center">{{ line1.joint_number }}</td>
                                            <td align="center">{{ line1.welder }}</td>
                                            <td><a href="deletejoint/{{line1.id}}">Удалить</a>
                                                <p>
                                                <a href="#zatemnenie">Изменить</a></p>
                                                <div id="zatemnenie">
                                                    <div id="okno">
                                                        Изменение информации о стыке<br>
                                                        <form method="post" action="">
                                                            {% csrf_token %}
                                                            Добавить информацию: <p></p>
                                                            Название линии {{ form.edit_line_name }}
                                                            <input type="text" name="edit_line_name" required="" id="id_edit_line_name" value="{{line1.name_of_line}}">
                                                            Номер узла   {{ form.edit_uzel_number }} {{line1.id}}
                                                            <input type="text" name="edit_uzel_number" required="" id="id_edit_uzel_number" value="{{line1.uzel_number}}">
                                                            Номер стыка   {{ form.edit_joint_number }} {{line1.id}}
                                                            <input type="text" name="edit_joint_number" required="" id="id_edit_joint_number" value="{{line1.joint_number}}">
                                                            Сварщик   {{ form.edit_welder }}
                                                            <input type="text" name="edit_welder" required="" id="id_edit_welder" value="{{line1.welder}}">
                                                            <p><input type="submit" formaction="/applychanges" value="OK" >
                                                        </form>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </table>
                                {% endif %}
                            <form method="post" action="">
                                {% csrf_token %}
                                Добавить информацию: <p></p>
                                Название линии  {{ form.inf_line_name }}
                                <input type="text" name="inf_line_name" required="" id="id_inf_line_name" value="{{full_lines_info_table.0.name_of_line}}">
                                Номер узла   {{ form.inf_uzel_number }}
                                <input type="text" name="inf_uzel_number" required="" id="id_inf_uzel_number">
                                Номер стыка   {{ form.inf_joint_number }}
                                <input type="text" name="inf_joint_number" required="" id="id_inf_joint_number">
                                Сварщик   {{ form.inf_welder }}
                                <input type="text" name="inf_welder" required="" id="id_inf_welder">
                                <p><input type="submit" value="OK" >
                            </form>
                            </p>
                </form>
{% endblock rightcolumn %}

Comments

[Bosstas]

Доброе время суток!
Как передавать данные из сплывающей формы на сайт?

Answer 1

[Александр Епихин]

Скорее всего вы открываете модальное окно ссылаясь на id="zatemnenie". У вас в каждой строке присутствует блок с одинаковым id. Задайте уникальный id. Например zatemnenie-1, zatemnenie-2 и т.д.

Comments

[s_stepashka]

Есть в этом логика, но не могу сообразить как это реализовать с учётом того, что Количество записей постоянно меняется, да к тому же учесть в этой системе наследование от base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Default title{% endblock title %}</title>
    <style>
      #zatemnenie {
        background: rgba(102, 102, 102, 0.5);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
      }
      #okno {
        width: 300px;
        height: 50px;
        text-align: center;
        padding: 15px;
        border: 3px solid #0000cc;
        border-radius: 10px;
        color: #0000cc;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background: #fff;
      }
      #zatemnenie:target {display: block;}
      .close {
        display: inline-block;
        border: 1px solid #0000cc;
        color: #0000cc;
        padding: 0 12px;
        margin: 10px;
        text-decoration: none;
        background: #f2f2f2;
        font-size: 14pt;
        cursor:pointer;
      }
      .close:hover {background: #e6e6ff;}
    </style>
</head>
<body>
<div style="align-items: center; text-align: center">
    <h1 align="left"><a href="http://www.sojuzprommontazh.by/" class><img src="/static/images/soyuz_logo.jpg" alt="" width="163" height="38"></a></h1>
    <p></p>
    <table width="100%" cellspacing="0" cellpadding="5">
        <tr>
            <td width="15%" align="left" valign="top">
                {% block leftcolumn %}{% endblock leftcolumn %}
            </td>
            <td align="left" valign="top">
                {% block rightcolumn %}{% endblock rightcolumn %}
            </td>
        </tr>
    </table>
</div>
</body>
</body>
</html>

[Александр Епихин]

В цикле {% for line1 in full_lines_info_table %} добавляете index и засовываете в :

<a href="#zatemnenie-{{index + 1}}">Изменить</a></p>
<div id="zatemnenie-{{index + 1}}" class="zatemnenie">
<div id="okno-{{index + 1}}" class="okno">

И в css файле селекторы id переделывание на class.
Было

#zatemnenie {
}

Стало

.zatemnenie {
}

и т.п.
Строку
#zatemnenie:target {display: block;}
Переделать в
[idˆ='zatemnenie']:target {display: block;}
- это распространяется на все элементы у которых id начинается на строку 'zatemnenie' Описание

[s_stepashka]

Спасибо, огромное. всё заработало!