PHP Foreach 循环将数据传递到 jquery 模态以供表单使用

PHP Foreach loop passing data onto jquery modal for form use

我正在使用 Bootstrap 和 Codeigniter。我有一个 table 可以在我正在构建的管理界面上加载帐户的块历史记录。在作为 foreach 的一部分的每一行上,如果用户可以删除该块,则有一个 "unblock" 按钮,正如您希望在下面的示例中看到的那样。该按钮具体是 <td><?php if ($bd['expiredate'] > date('Y-m-d H:i:s')) { ?><button type="button" class="btn btn-info" data-toggle="modal" data-target="#delBlock" <?php if ($check_perm['unbanaccount'] == 0 || $bd['unblock_date'] > 0) { echo "disabled"; } ?> >Unblock</button><?php } ?></td>

        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                <thead>
                    <tr>
                        <th style="width: 125px;">Block Date</th>
                        <th style="width: 100px;">Blocked By</th>
                        <th style="width: 125px;">Expiry Date</th>
                        <th style="width: 100px;">Reason</th>
                        <th style="width: 100px;">Unblocked By</th>
                        <th style="width: 125px;">Unblocked Date</th>
                        <th style="width: 30px;">Block<br />Comment</th>
                        <th style="width: 30px;">Unblock<br />Comment</th>
                        <th style="width: 100px;">Options</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (empty($block_list)) { echo "<tr class='odd gradeX'><td colspan='9'><center>No data!</center></td></tr>"; } ?>
                    <?php foreach ($block_list as $bd): ?>
                        <tr class="odd gradeX">
                            <td><?php echo $bd['blockdate']; ?></td>
                            <td><?php echo $bd['blockname']; ?></td>
                            <td><?php echo $bd['expiredate']; ?></td>
                            <td><?php echo $bd['reason']; ?></td>
                            <td><?php echo $bd['ublockname']; ?></td>
                            <td><?php echo $bd['unblock_date']; ?></td>
                            <td><center><a data-toggle="collapse" data-parent="#accordion" href="#blockcomment<?php echo $bd['blockid']; ?>"><button type="button" class="btn btn-primary btn-circle"><i class="fa fa-list"></i></button></a></center></td>
                            <td><?php if (isset($bd['unblock_date']) == TRUE) { ?><center><a data-toggle="collapse" data-parent="#accordion" href="#ublockcomment<?php echo $bd['blockid']; ?>"><button type="button" class="btn btn-primary btn-circle"><i class="fa fa-list"></i></button></a></center><?php } ?></td>
                            <td><?php if ($bd['expiredate'] > date('Y-m-d H:i:s')) { ?><button type="button" class="btn btn-info" data-toggle="modal" data-target="#delBlock" <?php if ($check_perm['unbanaccount'] == 0 || $bd['unblock_date'] > 0) { echo "disabled"; } ?> >Unblock</button><?php } ?></td>
                        </tr>
                        <tr><td colspan="9">
                            <div id="blockcomment<?php echo $bd['blockid']; ?>" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <strong>Block Comment:</strong><br /><?php echo $bd['block_comment']; ?>
                                </div>
                            </div>
                            <div id="ublockcomment<?php echo $bd['blockid']; ?>" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <strong>Unblock Comment:</strong><br /><?php echo $bd['unblock_comment']; ?>
                                </div>
                            </div>
                        </td></tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
            <div align="right"><button type="button" class="btn btn-warning" data-toggle="modal" data-target="#addBlock" <?php if ($check_perm['banaccount'] == 0) { echo "disabled"; } ?> >Add New Block</button></div>
        </div>

一旦您点击 "Unblock" 按钮,如果帐户可以解锁,我会出现一个模式,您可以在其中输入关于您解锁用户的评论。每个块都由数据库中的唯一 ID(变量在上例中为 $bd['blockid'])引用。正是这个 blockid 我需要与数据库通信并告诉它要更新数据的块,以声明用户在 table.

上被解锁

模态如下:

        <div class="modal fade" id="delBlock" tabindex="-1" role="dialog" aria-labelledby="delBlockLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="delBlockLabel">Remove Block</h4>
                    </div>
                    <div class="modal-body">
                        <?php echo validation_errors(); ?>
                        <?php echo form_open('/account/delblock', array('class' => 'form-inline'), array('blockid' => $bd['blockid'], 'acct_id' => $acct_data->account_id)); ?>
                        <table>
                            <tr><td width="25%"><label>Unblock Comment</label></td>
                            <td width="450px"><textarea class="form-control" name="unbanComments" rows="5" style="width:100%;"></textarea></td></tr>
                        </table>
                    </div>
                    <center><div style="color:#EE0000; ">Note this will remove the ban with immediate effect.</div></center>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Remove Block</button>
                    </div>
                    <?php echo form_close(); ?>
                </div>
            </div>
        </div>

如您所见,我正在使用 Codeigniter 的表单助手函数 post array('blockid' => $bd['blockid'], 通过表单,这样我就可以使用我的 Codeigniter 模型来操作该记录。但是,由于 jQuery 模式不在循环中,它总是将最后一条记录作为 $bd['blockid'] 而不是我想要操作的实际记录(在这种情况下,我ID 为 7、6 和 5(按此顺序),我单击 ID 7 的记录,但它更改为 5)。我需要将特定 $bd['blockid'] 的模式传递给表单,以便我可以在我的 Codeigniter 模型中使用它。我将如何着手完成这样的事情?

我做了一些事情,把一些东西拼凑在一起,想出了这个:

我把按钮改成这样的视图:

<td><?php if ($bd['expiredate'] > date('Y-m-d H:i:s')) { ?><button type="button" class="btn btn-info" id="delBlockOpen" data-toggle="modal" data-target="#delBlock" data-id="<?php echo $bd["blockid"]; ?>" <?php if ($check_perm['unbanaccount'] == 0 || $bd['unblock_date'] > 0) { echo "disabled"; } ?> >Unblock</button><?php } ?></td>

(已添加 data-id="<?php echo $bd["blockid"]; ?>"

然后,在模态中:

<div class="modal fade" id="delBlock" tabindex="-1" role="dialog" aria-labelledby="delBlockLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="delBlockLabel">Remove Block</h4>
            </div>
            <div class="modal-body">
                <?php echo validation_errors(); ?>
                <?php echo form_open('/account/delblock', array('class' => 'form-inline'), array('acct_id' => $acct_data->account_id)); ?>
                <input type="hidden" id="blockidval" name="blockidval" />
                <table>
                    <tr><td width="25%"><label>Unblock Comment</label></td>
                    <td width="450px"><textarea class="form-control" name="unbanComments" rows="5" style="width:100%;"></textarea></td></tr>
                </table>
            </div>
            <center><div style="color:#EE0000; ">Note this will remove the ban with immediate effect.</div></center>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Remove Block</button>
            </div>
            <?php echo form_close(); ?>
        </div>
    </div>
</div>

最后,整个内容在我的页脚中补充了一些额外的 javascript:

<script type="text/javascript">
  $(function() {
      $(document).on('click','#delBlockOpen',function(e){
          $('#blockidval').val($(this).data('id'));
      });
  });
</script>