使用模态的Bootstrap删除记录

时间:2014-03-07 08:04:17

标签: php jquery html css twitter-bootstrap

我有一张包含大量记录的表,其中还有更新和删除列。我想使用bootstrap模式来确认删除记录。

这是我迄今为止所尝试过的:

<script type="text/javascript">
$(function(){
$(".btn-show-modal").click(function(e){
  e.preventDefault();
  $("#dialog-example").modal('show');
});

$("#btn-save").click(function(e) {
  e.preventDefault();

  $("#dialog-example").modal('hide');
});

});

                <tr>
                    <td><a href="project-detail.php?code=<?php echo $project; ?>">
                        <?php echo $project; ?></a></td>
                    <td><?php echo $desc; ?></td>
                    <td><a href="update-project.php?code=<?php echo $project; ?>" title="Update record">
                        <i class="icon-edit icon-white">
                        </i>
                    </a></td>
                    <td><a href="delete-project.php?code=<?php echo $project; ?>" 
                  class="btn-show-modal" data-toggle="modal" title="Delete record"><i class="icon-trash icon-white"></i></a></td>
                </tr>
                    <?php 
                    } 
                    ?>

            </table>

            <div class="modal hide fade" id="dialog-example">
                 <div class="modal-header">
                    <h5>Confirm Delete</h5>
                 </div>

                <div class="modal-body">
                     <p class="modaltext">Are you sure you want to delete this record?</p>
                </div>    

                <div class="modal-footer">
                  <a href="#" data-dismiss="modal" class="btn btn-info">No<a>
                  <a href="delete-project.php?code=<?php echo $project; ?>" class="btn btn-danger" id="btn-save">Yes<a>
                </div>
            </div>

但不幸的是我不能删除:(我在这里做错了什么?你的帮助非常值得赞赏。谢谢。

2 个答案:

答案 0 :(得分:1)

不要使用e.preventDefault(); for $(“#btn-save”)。click(function(e){

答案 1 :(得分:0)

您没有调用删除操作。

$(".save").click(function(){
    response = confirm("Delete?");
    if(response)
        $.ajax(/* do ajax call to delete*/);

    $("#dialog-example").modal('hide');
})