Question

我有一个包含“删除”按钮的表格。单击“删除”按钮后，将显示一个模态。模态包含一个问题，询问用户是否要从列表中删除该项目。它还包含另一个按钮“是”。

我不确定如何将数据传递给模态。

EDITED 这是我的观点：

<tbody>
            <?php
            foreach ($docs as $docs) {
                ?>
                <tr>
                    <td><?php echo $docs['Upload']['type']; ?></td>   
                    <td class ='actions'>
                        <div class="row">
                            <div class="col-sm-12 pull-right">
                                <?php
                                $uploadDetails = array(
                                    'class' => 'btn btn-primary btn-xs pull-right',
                                    'role' => 'button',
                                    'tabindex' => '-1',
                                    'id' => 'uploadDetails',
                                    'target' => '_blank'                                                    
                                    );

                                $download = array(
                                    'class' => 'btn btn-warning btn-xs pull-right',
                                    'role' => 'button',
                                    'tabindex' => '-1',
                                    'id' => 'downloadButton'
                                    );

                                $remove = array(
                                    'class' => 'btn btn-danger btn-xs pull-right',
                                    'role' => 'button',
                                    'tabindex' => '-1',
                                    'id' => 'removeButton'
                                    );
                                    ?>
                                    <?php
                                    echo $this->Html->link('View Details', array('controller' => 'schools', 'action' => 'uploaddetails', $docs['Upload']['iduploads']), $uploadDetails);
                                    ?>

                                    <?php echo $this->Html->link('Remove', '#removeUpload', array('data-toggle' => 'modal', 'data-id' => $docs['Upload']['iduploads'], 'role' => 'button', 'class' => 'btn btn-danger btn-xs pull-right', 'id' => 'removeButton')); ?>

                                    <!--<a href="#removeUpload" role="button" class="btn btn-danger btn-xs pull-right" tabindex="-1" data-toggle="modal" id="removeButton">Remove</a>-->

                                    <?php
                                    echo $this->Html->link('Download', array('action' => 'sendFile', $docs['Upload']['iduploads']), $download);
                                    ?>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <?php
                }
                ?>
            </tbody>

这是我的模态内容：

<div class="modal fade" id="removeUpload">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>

                    <h3 class="modal-title">Remove Selected Upload?</h3>

                    <hr>
                </div><!-- end modal-header -->
                <div class="modal-body">
                    <center>
                        <h4>
                            Are you sure you want to remove the selected upload?    
                        </h4>
                    </center>

                </div><!-- end modal-body -->
                <div class="modal-footer">  
                    <br>
                    <hr>                
                    <div class="col-sm-5 pull-right">
                        <div class="row">
                            <div class="col-sm-6">
                                <button class="btn btn-default" data-dismiss="modal" type="button" id="cancelButton">Cancel</button>
                            </div>
                            <div class="col-sm-6">
                                <?php
                                echo $this->Html->link('Yes', '#', array('id' => 'delete', 'class' => 'btn btn-success','role' => 'button'));
                                //echo $this->Html->link('Yes', array('controller' => 'schools', 'action' => 'remove', $docs['Upload']['iduploads']), $yes);
                                ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- end modal-content -->
        </div><!-- end modal-dialog -->
    </div><!-- end myModal -->

这是我的jQuery：

$(document).ready(function(){
 $('#removeUpload').on('show.bs.modal', function(e) {
    $('#delete').attr('href', 'remove/'+$(e.relatedTarget).data('id'));
    });

});

这是我的删除功能：

public function remove(){
        $id = $this->request->params['pass'][0];

        if(!$id) {
            $this->Session->setFlash('Invalid action', 'alert_box', array('class' => 'alert-danger'), 'uploads'); 
            $this->redirect(array('controller' => 'schools', 'action'=>'documents'));
        } else {
            if($this->Upload->delete($id)) {
                $this->Session->setFlash('Selected document has been removed.', 'alert_box', array('class' => 'alert-danger'), 'uploads'); 
            }else {
                $this->Session->setFlash('Unable to remove selected document!', 'alert_box', array('class' => 'alert-warning'), 'uploads'); 
            }
            $this->redirect(array('controller' => 'schools', 'action'=>'documents'));
        }
    }

现在发生的情况是，如果我将鼠标悬停在“是”按钮上，我会收到位于Chrome左下角的此消息：localhost / app / schools / remove / undefined。

Answer 1

表格中有很多行，只有一个模态。因此，您必须根据点击的行，使用javascript在模式中创建删除链接。

每行中的链接应如下所示：

<?php echo $this->Html->link('Delete', '#modal', array('data-toggle' => 'modal', 'data-id' => $field['Model']['id'])); ?>

在模态中创建一个链接：

<?php echo $this->Html->link('Delete', '#', array('id' => 'delete')); ?>

添加js代码（我假设你有jQuery）：

$('#modal').on('show.bs.modal', function(e) {
    $('#delete').attr('href', 'link_to_you_delete_action/'+$(e.relatedTarget).data('id'));
    });

Answer 2

所以我设法通过使用此代码以及使用@ PawelMysior的答案来完成这项工作。

表格中每一行的链接：

<?php echo $this->Html->link('Delete', '#modal', array('data-toggle' => 'modal', 'data-id' => $field['Model']['id'])); ?>

模态中的链接：

<?php echo $this->Html->link('Delete', '#', array('id' => 'delete')); ?>

最后，jQuery：

$(document).ready(function(){

    $('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
        var data_id = '';

        if (typeof $(this).data('id') !== 'undefined'){
          data_id = $(this).data('id');
        }

        $('#delete').attr('href', 'link_to_delete_action'+data_id);

    })
});

要检查它是否正常工作，请将鼠标悬停在模态链接上，您将看到浏览器左下方的路径。

在我使用@ Pawel的jQuery代码之前，我看到：localhost / app / schools / remove / undefined

现在，使用更新的jQuery我看到：localhost / app / schools / remove / data_id

CakePHP将值传递给Bootstrap 2.x模式

2 个答案: