Laravel 4 中的 Bootstrap 模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16481755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Modal Dialog in Laravel 4
提问by Gareth Daine
I have a form in my view for deleting records and I'd like a confirm dialog to show when the delete button is clicked. In my view I have this:
我的视图中有一个用于删除记录的表单，我希望在单击删除按钮时显示一个确认对话框。在我看来，我有这个：
{{ 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() }}
I'd like to be able to take the data attributes and dynamically populate a Twitter Bootstrap modal dialog using jQuery but I'm unsure how to approach this.
我希望能够获取数据属性并使用 jQuery 动态填充 Twitter Bootstrap 模式对话框，但我不确定如何处理。
What would you guys do? Basically, when the delete button is clicked I'd like a modal window to appear with the title and content from the data attributes, as well as a cancel button and a delete button. If the user clicks the delete button I'd like to submit the form.
你们会怎么做？基本上，当单击删除按钮时，我希望出现一个模式窗口，其中包含来自数据属性的标题和内容，以及一个取消按钮和一个删除按钮。如果用户单击删除按钮，我想提交表单。
It's important to note that this view contains a table of records, and each record has a delete form/button.
需要注意的是，此视图包含一个记录表，并且每条记录都有一个删除表单/按钮。
Would really appreciate your help with this one folks. Cheers.
非常感谢您对这个人的帮助。干杯。
EDIT: I have this now, which almost works but it doesn't submit the form?
编辑：我现在有了这个，它几乎可以工作，但它没有提交表单？
$('.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();
});
});
回答by Antonio Carlos Ribeiro
I am not using a form, just a link shaped as a button:
我没有使用表单，只是一个形状为按钮的链接：
{{ 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;')) }}
And this javascript:
这个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});
})
Here's a working fiddle: http://jsfiddle.net/antonioribeiro/wYbwv/
这是一个工作小提琴：http: //jsfiddle.net/antonioribeiro/wYbwv/
回答by darronz
You're trying to submit a button instead of a form.
您正在尝试提交按钮而不是表单。
Try changing $('.delete-event').submit();to $('form').submit();
尝试更改$('.delete-event').submit();为$('form').submit();
