1

我的视图中有一个用于删除记录的表单，我希望在单击删除按钮时显示一个确认对话框。在我看来，我有这个：

{{ Form::model($event, array('route' => array('events.destroy', $event->id), 'method' => 'Delete')) }}
    {{ Form::submit('Delete', array('class' => 'btn-small btn-danger delete-event', 'data-toggle' => 'modal', 'data-title' => 'Delete Event', 'data-content' => 'Are you sure you want to delete this event?')) }}
{{ Form::close() }}

我希望能够获取数据属性并使用 jQuery 动态填充 Twitter Bootstrap 模式对话框，但我不确定如何处理这个问题。

你们会怎么做？基本上，当单击删除按钮时，我希望显示一个模式窗口，其中包含数据属性中的标题和内容，以及一个取消按钮和一个删除按钮。如果用户单击删除按钮，我想提交表单。

需要注意的是，这个视图包含一个记录表，每条记录都有一个删除表单/按钮。

非常感谢您对这个人的帮助。干杯。

编辑：我现在有这个，它几乎可以工作，但它不提交表格？

$('.delete-event').click(function(event) {
    event.preventDefault();

    var title = $(this).attr('data-title');
    var content = $(this).attr('data-content');

    $('#event-modal').html(title);
    $('.modal-body p').html(content);
    $('.modal-footer .delete').html(title);
    $('#event-delete').modal('show');

    $('.delete').click(function(event) {
        $('#event-delete').modal('toggle');
        $('.delete-event').submit();
    });
});
4

2 回答 2

5

我没有使用表单，只是一个按钮形状的链接：

{{ Html::link(URL::route('event.destroy',$event->id), 'Delete', array('class' => 'btn btn-small btn-danger delete-event', 'data-title'=>'Delete Event', 'data-content' => 'Are you sure you want to delete this event?', 'onClick'=>'return false;')) }}

而这个javascript：

jQuery('.delete-event').click(function(evnt) {
            var href = jQuery(this).attr('href');
            var message = jQuery(this).attr('data-content');
            var title = jQuery(this).attr('data-title');

            if (!jQuery('#dataConfirmModal').length) {
                jQuery('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">'+title+'</h3></div><div class="modal-body">'+message+'</div><div class="modal-footer"><button class="btn btn-success" data-dismiss="modal" aria-hidden="true">No</button><a class="btn btn-danger" id="dataConfirmOK">Yes</a></div></div>');
            } 

            jQuery('#dataConfirmModal').find('.modal-body').text(message);
            jQuery('#dataConfirmOK').attr('href', href);
            jQuery('#dataConfirmModal').modal({show:true});
})

这是一个工作小提琴：http: //jsfiddle.net/antonioribeiro/wYbwv/

于 2013-05-10T13:20:46.240 回答
1

您正在尝试提交按钮而不是表单。

尝试更改$('.delete-event').submit();为$('form').submit();

于 2013-05-10T13:25:57.993 回答