如何在单击链接时将编辑表单显示为jquery弹出模式

时间:2011-11-24 21:44:08

标签: jquery-ui codeigniter jquery codeigniter-2

我在视图文件中显示来自数据库的信息,并且有一个编辑选项,但它还没有功能。我希望有这样的编辑选项 - 当任何用户点击编辑链接时(我使用图像作为编辑按钮),将弹出一个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”发布到我的控制器,然后查询数据库并以常规方式将数据发送回查看文件。现在我只想知道如何向我的用户呈现“更新”表单(已向用户填充相关信息)。

1 个答案:

答案 0 :(得分:2)

首先,您需要在编辑锚标记中添加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>