Question

我想在删除实体之前使用Bootstrap v3显示确认删除对话框。我的代码工作正常但没有确认对话框。我怎么能这样做？

{% for travel in pagination %}
    <div class="col-sm-6 col-md-4" id="item-{{ travel.id }}">
 //......
        <a title="delete" href data-entity-id="{{ travel.id }}" class="button btn-mini red remove_item">Delete</a>

    </div>
{% endfor %}

<script>

    $(document).ready(function () {

        $(".remove_item").click(function () {

            var entityId = $(this).attr('data-entity-id');
            var itemId = 'item-' + entityId;

            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: Routing.generate('travel_delete', {'id': entityId}),
                success: function () {
                    //hide the block of item after delete success
                    $('#' + itemId).fadeOut();
                }
            });
            return false;
        });

    });
</script>

被修改

我试过这段代码。我想点击删除链接时，将删除链接中的attr entity-id 的值传递给删除按钮中的attr data-entity-id 在模态中。我怎么能这样做？

错误控制台： Failed to load resource: the server responded with a status of 404 (Not Found)

<a title="delete" href data-toggle="modal" data-target="#myModal" entity-id="{{ travel.id }}" class="button btn-mini uppercase red">Sup ajax</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   <button data-entity-id="" type="button" class="btn btn-primary remove_item">Delete</button>

</div>


<script>

    $(document).ready(function () {

        $('#myModal').on('show.bs.modal', function () {
            var entityId = $(this).attr('entity-id');
            // set new value of attr data-entity-id but doesn't work
            $('.remove_item').attr('data-entity-id', entityId);

        });

        $(".remove_item").click(function () {
            var entityId = $(this).attr('data-entity-id');
            var itemId = 'item-' + entityId;
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: Routing.generate('frontend_travel_delete_favorite', {'id': entityId}),
                success: function () {
                    $('#' + itemId).fadeOut();
                }
            });
            return false;
        });


    });
</script>

Answer 1

尝试这样做：

<a id="delete-btn" title="delete" href data-toggle="modal" data-target="#myModal" data-entity-id="{{ travel.id }}" class="button btn-mini uppercase red">Sup ajax</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   <button data-entity-id="" type="button" class="btn btn-primary remove_item">Delete</button>

</div>


<script>

    $(document).ready(function () {

        $('#delete-btn').on('click', function () {
            var entityId = $(this).attr('data-entity-id');
            $('.remove_item').attr('data-entity-id', entityId);
        });

        $(".remove_item").click(function () {
            var entityId = $(this).attr('data-entity-id');
            var itemId = 'item-' + entityId;
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: Routing.generate('frontend_travel_delete_favorite', {'id': entityId}),
                success: function () {
                    $('#' + itemId).fadeOut();
                }
            });
            return false;
        });


    });
</script>

使用ajax和bootstrap确认删除对话框

1 个答案: