我正在使用app，它需要一个表单在bootstrap模式中，并且还动态加载表单。我面临的问题是所有页面都再次加载到模态中。这里的任何人都提供了这个例子..？
//控制器
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');
由于
答案 0 :(得分：12)
这是一个迟到的答案，但我想动态加载所有模态，而不是在标记中加载它们，所以我为每个模式创建了视图 - 用于删除，编辑等，只是内部部分（内容）
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更干净。我希望这对某些人也有帮助 - 我愿意接受建议：）
答案 1 :(得分：2)
更新了Laravel 5.4的Angel M.'s答案
index.blade.php上的我有一个模态的骨架：
<script>
if (!str)
return str;
var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' :
'|\\S+?(\\s|$)');
return str.match( RegExp(regex, 'g') ).join(brk);
}
function convert2() {
var Name2 = document.getElementById("name2").value;
var Currentnumber = document.getElementById("currentnumber").value;
var YESNO = document.getElementById("yesno").value;
var selfserve = document.getElementById("SSO").value;
var problem = document.getElementById("problem").value;
var issue2 = document.getElementById("issue2").value;
var action2 = document.getElementById("action2").value;
//input = wordwrap(input, 70, true);
var output = "";
output += "Name2: " + name2 + "\n";
output += "Current number: " + currentnumber + "\n";
output += "Yes No?: " + yesno + "\n";
output += "Self Serve?: " + selfserve + "\n\n";
output += "Problem: " + problem + "\n\n";
output += "Issue: " + issue2 + "\n\n";
output += "Action: " + action2 + " ";
document.getElementById("output2").value = output;
}
function myFunction(x) {
x.classList.toggle("change");
}
</script>
和不同操作的按钮：
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body load_modal">
</div>
</div>
</div>
我为所有操作制作了一个方法： $ modal是data-action中的视图名称，例如：delete.blade.php
<button type="button" title="View Profile" class="btn btn-info btn-simple btn-xs" data-toggle="modal" data-target="#user" data-id="{{ $user->id }}" data-post="data-php" data-action="view" data-title="Mais sobre:"><i class="fa fa-user"></i></button>
<button type="button" title="Edit Profile" class="btn btn-success btn-simple btn-xs" data-toggle="modal" data-target="#user" data-id="{{ $user->id }}" data-title="Editar" data-post="data-php" data-action="edit"><i class="fa fa-edit"></i></button>
：
public function loadModal($modal, $id, $action)
{
$user = $user = User::findOrFail($id);
//return view for specified action
//if action is delete, call this view, etc...
return view('admin.includes.modal.'.$modal, compact('user'));
}
最后JS加载内容：
Route::get('{modal}/{id}/load-{action}','Admin\UserCtrl@loadModal');