Question

到目前为止，我现在可以使用modal删除记录，但只需要转到页面delete-page。我想在删除前使用确认删除记录（使用模态），然后删除记录而不刷新页面。

这是我到目前为止所尝试的：

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

        $("#btn-delete").click(function(e) {
            $("#dialog-example").modal('hide');
        });
    });
</script>


<?php
    $stmt2 = $conn->prepare("SELECT project_code, description FROM tblprojects");
    $stmt2->execute();

    for($i=0; $row2 = $stmt2->fetch(); $i++){
        $project = $row2['project_code'];
        $desc = $row2['description'];
    ?>
    <tr class="record" id="record-">
        <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="#"
               data-id="<?php echo $project; ?>"
               id="<?php echo $project; ?>"
               class="btn-show-modal" data-toggle="modal" title="Delete record">
                <i class="icon-trash icon-white"></i>
            </a>
        </td>

        <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; ?>"
                           data-id="<?php echo $project; ?>"
                           class="btn btn-danger" id="btn-delete">Yes<a>
            </div>
        </div>

    </tr>
<?php
    }
?>

有什么想法吗？谢谢您的帮助。

Answer 1

试试这个：

$("#btn-delete").click(function(e) {
    e.preventDefault();
    $.get(this.href, function(){
        $("#dialog-example").modal('hide');
    });
});

Answer 2

我在我的项目中完成所有这些但是不想发布它，因为代码可能对其他人没有任何意义（并且它相当长）但这就是我所做的：

<!-- Delete Modal -->
<div id="delete_modal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" tabindex="-1">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <h3 id="myModalLabel">Delete</h3>
</div>
<div class="modal-body">
    <div class="row-fluid">
        <div class="span12"></div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button id="delete_confirm" class="btn red btn-primary" data-dismiss="modal">Delete</button>
</div>

<!-- Submit Delete Modal -->
<div id="submit_delete_modal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" tabindex="-1">
    <div class="modal-header">
    <h3 id="myModalLabel">Deleting</h3>
    </div>
    <div class="modal-body">
        <div class="row-fluid">
            <div class="span12">
                <div class="alert alert-info">Deleting... <img src="/images/loading.gif" alt="Deleting..." /></div>
            </div>
        </div>
    </div>
</div>

这就是我使用的两个模态，一个用于确认，另一个用于显示该项目实际上已被删除。

这是JS：

    $('.delete').click(function() {

        $('#delete_modal .modal-body div div').html('Are you sure you want to delete this row?');
    });

    // this is the delete button in the confirmation modal
    $('#delete_confirm').click(function() {

        $('#delete_modal').modal('hide');

        $('#submit_delete_modal').modal('show');

        $.ajax({           
            url: '/delete-page', 
            data: { id: id },
            type: "POST",
            cache: false,           
            success: function(data) {

                if (data === '1') {

                    // delete the row from the DOM
                    $('tr#record-' + id).fadeOut('slow').remove();

                    $('#submit_delete_modal .modal-body div div').html('<div class="alert alert-success"><i class="icon-ok-sign"></i> The row has been deleted</div>');

                } else {
                    $('#submit_delete_modal .modal-body div div').html('<div class="alert alert-error"><i class="icon-exclamation-sign"></i> Deletion failed, please refresh the page and try again</div>');
                }

            },
            error: function() {
                $('#submit_delete_modal .modal-body div div').html('<div class="alert alert-error"><i class="icon-exclamation-sign"></i> Deletion failed, please refresh the page and try again</div>');
            }   
        });

        return false;

    });

只是一个指针，看着你的tr标记，你是想将id作为行ID的一部分放在数据库中吗？

你有<tr class="record" id="record-">所以每一行都有相同的id，如果你添加正确的参数，每一行都有一个唯一的id，ajax回调中的删除部分就可以了。

唯一剩下的就是在点击某些内容时获取id，但我发现很难说出你用来执行删除的链接。

它应该是这样的：

    var id; // put this as the very first line of js, if it's in the global scope it can be accessed from anywhere, it's not best practise though.

    $(document).on('click', '.some_class_name', function() {

        id = $(this).parent().parent().attr('id').split('-').pop();

        $('#delete_modal .modal-body').html('Are you sure that you want to remove this row?');
        $('#delete_modal').modal('show');

        // uncomment this to check you're getting the correct id and that it's not undefined etc
       // alert('id');

        return false;

    });

我试图把所有的一切都命名为避免我突然出血的东西，但我可能错过了一些东西，并在重命名元素等时出现了一些错误。

Bootstrap删除行没有使用模态刷新页面

2 个答案: