Как отобразить форму редактирования в виде всплывающего модального jquery при нажатии на ссылку

Question

Я отображаю информацию из базы данных в виде файла, и есть возможность редактировать, но она пока не работает. Я хочу иметь опцию редактирования, например, такую: когда любой пользователь нажимает на ссылку редактирования (я использую изображение в качестве кнопки редактирования), появится модальное окно jquery, в котором будет показана простая форма редактирования (а в фоновом режиме появится запрос к базе данных для получения информации, основанной на щелкнувшем значении).

Не могли бы вы мне помочь, как получить данные из базы данных и показать форму редактирования в виде всплывающего мод jquery при нажатии на ссылку редактирования? (Пожалуйста, проверьте файл просмотра ниже, чтобы увидеть ссылку для редактирования)

По крайней мере, пример был бы высоко оценен :)

Заранее спасибо:)

Вот мой файл просмотра:

 <article id="dashboard">

            <?php if(count($records) > 0) { ?>
            <h1> Batch Name: <?php echo "$batchname";?> </h1>
            <table id="table1" class="gtable sortable">
            <thead>
                    <tr>
                        <th>S.N</th>
                        <th>Student ID</th>
                        <th>Exam Date</th>
                        <th>Exam Type</th>
                        <th>Subject</th>
                        <th>Total Mark</th>
                        <th>Highest Mark</th>
                        <th>Obtained Mark</th>
                        <th>GPA</th>
                        <th>Grade</th>
                        <th>Status</th>
                        <th>Edit/Delete</th>
                    </tr>
            </thead>
            <tbody>
             <?php $i = $this->uri->segment(3) + 0; foreach ($records as $row){ $i++; ?>


                    <tr>
                        <td><?php echo $i; ?>.</td>

                        <td><a href="<?php echo base_url(); ?>viewbatch/get/<?php echo $row['studentid']; ?>"><?php echo $row['studentid'];?></a></td>
                        <td><?php echo $row['examdate'];?></td>
                        <td><?php echo $row['examtype'];?></td>

                        <td><?php echo $row['subject'];?></td>
                        <td><?php echo $row['totalmark'];?></td>

                        <td><?php echo $row['highestmark'];?></td>
                        <td><?php echo $row['obtainedmark'];?></td>

                        <td><?php echo $row['gradepoint'];?></td>
                        <td><?php echo $row['grade'];?></td>
                        <td><?php echo $row['status'];?></td>

                        <td> <a href="<?php echo base_url(); ?>updatebatch/get/<?php echo $row['id']; ?>" title="Edit"><img src="<?php echo base_url(); ?>support/images/icons/edit.png" alt="Edit" /></a>
                             <a href="#" title="Delete"><img src="<?php echo base_url(); ?>support/images/icons/cross.png" alt="Delete" /></a>
                             </td>
                    </tr>
            <?php  } ?>

            </tbody>
            </table>
            <?php } else { echo "No Record Found";} ?>
            <div class="tablefooter clearfix">

                        <div class="pagination">
                        <?php echo $this->pagination->create_links(); ?> 
                        </div>
            </div>



        </article>

Редактировать ::

Спасибо, mmmshuddup за вашу помощь. На самом деле я стремлюсь показать всплывающую модальную форму jquery, с помощью которой пользователи могут обновлять данные. В настоящее время в файле представления у меня есть список информации о студентах, которую я получил из базы данных. Чтобы пользователи могли обновлять информацию о студентах, у меня есть опция редактирования, но в данный момент она не работает. Пока что вы ответили достаточно хорошо, но не могли бы вы показать мне, как отображать данные в модальной форме между ними. Вам не нужно ничего упоминать о части контроллера, скажем, я отправляю «id» на мой контроллер, а затем запрашиваю базу данных и отправляю данные обратно для регулярного просмотра файла. Теперь все, что я только хочу знать, как представить форму «обновления» (уже заполненную соответствующей информацией для пользователя) моему пользователю.

Answer 1

Прежде всего, вы захотите добавить атрибут class и / или id к своим тегам привязки редактирования.

Примерно так:

<a href="<?= base_url(); ?>updatebatch/get/<?= $row['id']; ?>" title="Edit"
    id="edit-<?= $row['id']; ?>" class="edit-link">
    <img src="<?= base_url(); ?>support/images/icons/edit.png" alt="Edit" /></a>

Затем создайте div, в который можно загрузить ваш модальный контент:

<div id="modal-dialog"></div>

Теперь вы готовы настроить модальные вещи jquery и прослушиватели событий onclick для ссылки на редактирование:

$('#modal-dialog').dialog({
    title: 'Edit Your Item',
    autoOpen: false,
    show: 'blind',
    width: 800,
    height: 600,
    modal: true
});

var baseUrl = "<?= base_url(); ?>updatebatch/get/";

$('.edit-link').click(function(e) {
    var id = this.id.split('-')[1];
    $('#dialog')
        .load(baseUrl + id) // or something like this
        .dialog('open');
});

Опять же, это всего лишь пример того, как вы могли бы сделать это.Есть и другие способы динамической загрузки контента.И я не уверен, что именно вы хотите, чтобы ваш PHP-скрипт делал ..

Редактировать:

По запросу OP, вот пример того, как заполнитьполя, использующие PHP (не javascript):

<!-- assume $row is the query result array of data -->
<input type="hidden" name="id" value="<?php echo $row['id'];" />
<input type="text" name="name" id="name" value="<?php echo $row['name']; ?>" />
<textarea name="content" id="content" rows="8" cols="50">
    <?php echo $row['content']; ?>
</textarea>