Fancybox модальный, не может заполнять поля ввода из базы данных

Question

У меня есть проект в php codeigniter, где данные извлекаются из БД, а с помощью foreach l oop он создает строки в таблице, каждая строка имеет кнопку редактирования, которая открывает модальное окно fancybox в этом модальном У меня есть 2 поля ввода, имя и фамилия, которые я пытаюсь заполнить текущими значениями из базы данных, в разделе значений, который я пробовал value="<?php echo $row->first_name ?>, проблема в том, что все строки получают одно и то же значение, модальное окно делает не получить правильные данные для каждой строки.

Соответствующий код:

<a data-fancybox data-touch="false" href="#modal" class="btn btn-secondary" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>

<div id="modal">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <form method="post"  action="<?php echo base_url()?>index.php/welcome/formValidation">
                    <div class="form-row">
                        <div class="col-12 mb-3">
                            <h3 class="mb-3">Modifica Rapid:</h3>
                            <label for="nume">Nume:</label>
                            <input type="text" class="form-control" id="nume" placeholder="Nume" name="nume" value="<?php echo $row->last_name ?>"required>
                        </div>
                        <div class="col-12 mb-3">
                            <label for="prenume">Prenume</label>
                            <input type="text" class="form-control" id="prenume" placeholder="Prenume" name="prenume" value="<?php echo $row->first_name ?>" required>
                        </div>
                        <div class="col-12 mb-3 text-center">
                            <button style="width:150px;height:50px;" class="btn btn-warning" type="submit">Modifica</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Answer 1

Один из обходных путей - вы можете назначить атрибуты data, содержащие данные last_name и first_name, и добавить класс edit-btn (в качестве триггера) к ссылке кнопки редактирования:

<a data-fancybox data-touch="false" href="#modal" class="btn btn-secondary edit-btn" data-lastName="<?php echo $row->last_name ?>" data-firstName="<?php echo $row->first_name ?>" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>

<div id="modal">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <form method="post"  action="<?php echo base_url()?>index.php/welcome/formValidation">
                    <div class="form-row">
                        <div class="col-12 mb-3">
                            <h3 class="mb-3">Modifica Rapid:</h3>
                            <label for="nume">Nume:</label>
                            <input type="text" class="form-control" id="nume" placeholder="Nume" name="nume" required>
                        </div>
                        <div class="col-12 mb-3">
                            <label for="prenume">Prenume</label>
                            <input type="text" class="form-control" id="prenume" placeholder="Prenume" name="prenume" required>
                        </div>
                        <div class="col-12 mb-3 text-center">
                            <button style="width:150px;height:50px;" class="btn btn-warning" type="submit">Modifica</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Затем установите значение модального ввода, используя каждое из значений данных:

$(document).on("click", ".edit-btn", function () {
    let lastname = $(this).attr("data-lastname");
    let firstname = $(this).attr("data-firstname");
    $('#nume').val(lastname); // set the lastname input inside the modal using the data attribute
    $('#prenume').val(firstname); // set the firstname input inside the modal using the data attribute
});

Answer 2

Что вам нужно сделать, так это прикрепить идентификатор $ row к модальному css id, чтобы каждый модальный был уникальным.

<a data-fancybox data-touch="false" href="#modal<?=$row->id;?>" class="btn btn-secondary" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>
<div id="modal<?=$row->id;?>">
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <form method="post"  action="<?php echo base_url()?>index.php/welcome/formValidation">
                    <div class="form-row">
                        <div class="col-12 mb-3">
                            <h3 class="mb-3">Modifica Rapid:</h3>
                            <label for="nume">Nume:</label>
                            <input type="text" class="form-control" id="nume" placeholder="Nume" name="nume" value="<?php echo $row->last_name ?>"required>
                        </div>
                        <div class="col-12 mb-3">
                            <label for="prenume">Prenume</label>
                            <input type="text" class="form-control" id="prenume" placeholder="Prenume" name="prenume" value="<?php echo $row->first_name ?>" required>
                        </div>
                        <div class="col-12 mb-3 text-center">
                            <button style="width:150px;height:50px;" class="btn btn-warning" type="submit">Modifica</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Поэтому измените

<a data-fancybox data-touch="false" href="#modal" class="btn btn-secondary" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>

на

<a data-fancybox data-touch="false" href="#modal<?=$row->id;?>" class="btn btn-secondary" style=" margin-bottom:5px;" id="<?php echo $row->id; ?>" type="button" name="button">Edit</a>

путем добавления идентификатора строки к css, чтобы получить уникальный модальный идентификатор, если не вся ссылка вызовет только последний модальный. То же изменение и для модального изменения

<div id="modal">

на

<div id="modal<?=$row->id;?>">