Twitter bootstrap Laravel 4中的引导模式对话框

Twitter bootstrap Laravel 4中的引导模式对话框,twitter-bootstrap,modal-dialog,laravel,laravel-4,Twitter Bootstrap,Modal Dialog,Laravel,Laravel 4,我的视图中有一个用于删除记录的表单,我希望在单击删除按钮时显示一个确认对话框。我认为: {{ Form::model($event, array('route' => array('events.destroy', $event->id), 'method' => 'Delete')) }} {{ Form::submit('Delete', array('class' => 'btn-small btn-danger delete-event', 'data-t

我的视图中有一个用于删除记录的表单,我希望在单击删除按钮时显示一个确认对话框。我认为:

{{ 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引导模式对话框,但我不确定如何实现这一点

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

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

非常感谢你对这一点的帮助。干杯

编辑:我现在有了这个,它几乎可以正常工作,但它不提交表单

$('.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();
    });
});

我使用的不是表单,只是一个按钮形状的链接:

{{ 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});
})
jQuery('.delete event')。单击(函数(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('×'+title+''+message+'No

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

{{ 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});
})
jQuery('.delete event')。单击(函数(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')。追加('×'+标题+'+消息+'No

您试图提交的是按钮而不是表单


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

您尝试提交的是按钮而不是表单


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

干杯,老兄。是的,我自己也意识到了。干杯,老兄。是的,我自己也意识到了。这正是我想要的。谢谢老兄。唯一的问题是,它没有在视图中创建模式div时的良好幻灯片效果。而且,你的版本实际上没有删除事件?幻灯片效果是一个引导你只需要加上“淡入淡出”它将使用route生成的链接调用您的控制器操作,在示例中,它将调用EventController@destroy动作。这正是我想要的。谢谢,伙计。唯一的问题是,它没有在视图中创建模式div时的良好幻灯片效果。另外,您的版本是n实际上并没有删除事件?幻灯片效果是一个引导css的东西,您只需将“淡入”添加到模态类中。它将使用路由生成的链接调用控制器操作,在示例中,它将调用EventController@destroy我解决了这个问题做了下面的我解决了这个问题做了下面的