单击链接时如何将编辑表单显示为 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>