在Laravel中,我有一个表格,每行都包含一个编辑链接,如下所示;
<a data-toggle="modal" href="{{ route('myrow.edit', ['id' => $value['id']]) }}" data-target="#myModal">
<i class="fa fa-btn fa-pencil"></i>
</a>
模态屏幕定义如下;
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
单击前面提到的按钮时,包含的 edit.blade.php 如下所示;
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">My modal title</h4>
</div>
{!! Form::model($myrow, array('route' => array('mycontroller.update', $myrow->id), 'method' => 'PUT')) !!}
<div class="modal-body">
<!-- All kinds of fields -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-success" type="submit">Save</button>
</div>
{!! Form::close() !!}
调用的 mycontroller.update 如下所示;
public function update(Request $request, $id) {
$mymodel = MyModel::find($id);
$mymodel->user = $request->user()->id;
$mymodel->field = $request->field;
if (!$mymodel->save()) {
$errors = $mymodel->getErrors();
return redirect()
->action('MyController@index')
->with('errors', $errors)
->withInput();
}
return redirect()
->action('MyController@index')
->with('message', $mymodel->field . ' was added');
}
当我在模态屏幕中填写数据并提交时,一切正常。当我按取消,按关闭模态的"x"或只是在模态外部单击时,问题就开始了。在这些情况下,模态显然会关闭,但是当我单击任何其他行中的编辑链接时,它将始终打开以前未保存的行的模态屏幕,直到我刷新屏幕。
显然,在模态窗口以任何方式关闭后,我需要一些处理,但我应该怎么做。有人对此有好的策略吗?
更新:它也不会执行第二个 GET 请求。我第一次单击编辑链接时,它会检索正确的数据 获取 https://example.com/mylaravelapp/mymodel/1/edit第二次(以及任何后续)时间根本没有提出任何请求。
您需要使用 JavaScript 清除表单字段并根据您单击的行重新填充它们。模式在关闭后仍然存在于 Dom 中,这就是您看到之前输入的值的原因
问题在于Bootstrap Modal的引用。您正在创建一个独特的模态。切换模态的按钮使用 data-target="#myModal"
属性来引用单击按钮时将弹出的 html。html的这一部分由id="myModal"
标识。因此,如果您想创建多个模态,则需要这样的东西:
- 更改数据目标属性的值
<a data-toggle="modal" href="{{ route('myrow.edit', ['id' => $value['id']]) }}" data-target="#myModal_{{$value['id']}}">
<i class="fa fa-btn fa-pencil"></i>
</a>
- 然后编辑模态的 html 定义
<div class="modal fade" id="myModal_{{$value['id']}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
但是,您不应该创建多个模态;您只能创建一个模态,并使用 Javascript 更新模态内容和表单的动作属性。