使用laravel动态加载Bootstrap模态中的表单 [英] load form in bootstrap modal dynamically using laravel
问题描述
我正在开发应用程序,该应用程序需要以自举模式运行的表单,并且还需要动态加载表单.我面临的问题是所有页面都再次以模式加载.这里有人为此提供任何示例吗?
//控制器
public function loadJsModalForm() {
return View::make('frmModals.frmProject');
}
//index.blade
@section('Modal')
<!-- Modal -->
<div class="modal fade" id="ProjectModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" id="frmAddProject"></div>
</div>
</div>
@stop
//形式模态
{{ Form::open(array('url'=>'projects/jsModal', 'class'=>'frmCreateProject')) }}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Create Project</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
{{ Form::label('Project Title') }}
{{ Form::text('project_title', null, array('class'=>'form-control', 'placeholder'=>'Project title')) }}
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
{{ Form::submit('Submit', array('class'=>'btn btn-primary')) }}
</div>
{{ Form::close() }}
//main.js
function openMdoal(link, div){
$(link).on('click', function(e){
e.preventDefault();
$('#'+div).html('<div style="text-align:center;"><img src="../img/spinner.gif"/><br/><br/><h3 class="text-primary">Loading Form...</h3></div>');
$(div).load(
$(this).attr('href'),
function(response, status, xhr) {
if (status === 'error') {
//console.log('got here');
$(div).html('<p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
}
return this;
}
);
});
}
$(document).ready(function(){
openMdoal('.addProjectModal', '#frmAddProject');
});
//路线
Route::get('projects/jsModal', 'ProjectsController@loadJsModalForm');
谢谢
这是一个较晚的答案,但是我想动态加载所有模式,而不是将它们包含在标记中,所以我为它们中的每一个创建了视图-用于删除,编辑等等,只是内部(内容)
在index.blade.php上,我有一个模态框架:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content load_modal"></div>
</div>
</div>
和按钮以执行不同的操作:
<button type="button" class="btn btn-danger" data-toggle="modal" data-id="{{ $id }}" data-post="data-php" data-action="delete">Delete </button>
,然后为不同的模式调用按钮单击内容,每个模式的视图已分开,例如modal_delete.blade.php看起来像这样:
<div class="modal-body">
<em>Are you sure that you want to delete</em>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger photo-delete" data-slug="">Delete</button>
</div>
在控制器中,我制定了一种用于所有动作的方法:
/**
* load modals dynamically - for edit, delete,create
* GET /folder/{id}/load-{action}
*
* @param string $action
* @param int $id
* @return Response
*/
public function loadModal($id, $action)
{
//return view for specified action
//if action is delete, call this view, etc...
return View::make('admin.photos.modal_delete')->render();
}
在路线上:
Route::get('photos/{id}/load-{action}','YourController@loadModal');
,最后是JS来加载内容:
$('button').on('click', function(){
var this_id = $(this).attr('data-id');
var this_action = $(this).attr('data-action');
if(this_action == 'edit'){
$.get( base_url + this_id + '/load-' + this_action, function( data ) {
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .load_modal').html(data);
});
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').data('');
});
});
}
});
这样,我的html会更干净.我希望这也会对某人有所帮助-我愿意提出建议:)
I am working on app, which required a form in bootstrap modal and also load the form dynamically. i am facing the problem all of the page is loaded in modal again. Anybody here provide any example for this..?
// Controller
public function loadJsModalForm() {
return View::make('frmModals.frmProject');
}
// index.blade
@section('Modal')
<!-- Modal -->
<div class="modal fade" id="ProjectModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" id="frmAddProject"></div>
</div>
</div>
@stop
// form Modal
{{ Form::open(array('url'=>'projects/jsModal', 'class'=>'frmCreateProject')) }}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Create Project</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
{{ Form::label('Project Title') }}
{{ Form::text('project_title', null, array('class'=>'form-control', 'placeholder'=>'Project title')) }}
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
{{ Form::submit('Submit', array('class'=>'btn btn-primary')) }}
</div>
{{ Form::close() }}
// main.js
function openMdoal(link, div){
$(link).on('click', function(e){
e.preventDefault();
$('#'+div).html('<div style="text-align:center;"><img src="../img/spinner.gif"/><br/><br/><h3 class="text-primary">Loading Form...</h3></div>');
$(div).load(
$(this).attr('href'),
function(response, status, xhr) {
if (status === 'error') {
//console.log('got here');
$(div).html('<p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
}
return this;
}
);
});
}
$(document).ready(function(){
openMdoal('.addProjectModal', '#frmAddProject');
});
// Route
Route::get('projects/jsModal', 'ProjectsController@loadJsModalForm');
Thanks
this is a late answer, but I wanted to load all modals dynamically instead of having them in markup, so I created views for each of them - for delete, edit, etc., just the inner part (content)
on index.blade.php I have a skeleton for modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content load_modal"></div>
</div>
</div>
and buttons for different actions:
<button type="button" class="btn btn-danger" data-toggle="modal" data-id="{{ $id }}" data-post="data-php" data-action="delete">Delete </button>
and then call on button click content for different modals, having separated views for each modal, for example modal_delete.blade.php looks like that:
<div class="modal-body">
<em>Are you sure that you want to delete</em>?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger photo-delete" data-slug="">Delete</button>
</div>
in controller I made a method for all actions:
/**
* load modals dynamically - for edit, delete,create
* GET /folder/{id}/load-{action}
*
* @param string $action
* @param int $id
* @return Response
*/
public function loadModal($id, $action)
{
//return view for specified action
//if action is delete, call this view, etc...
return View::make('admin.photos.modal_delete')->render();
}
in routes:
Route::get('photos/{id}/load-{action}','YourController@loadModal');
and finally JS to load the content:
$('button').on('click', function(){
var this_id = $(this).attr('data-id');
var this_action = $(this).attr('data-action');
if(this_action == 'edit'){
$.get( base_url + this_id + '/load-' + this_action, function( data ) {
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .load_modal').html(data);
});
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').data('');
});
});
}
});
This way my html is cleaner. I hope this will help someone, as well - I'm open to suggestions :)
这篇关于使用laravel动态加载Bootstrap模态中的表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!