取消模式引导窗口后的 Laravel处理/重定向


Laravel processing/redirect after cancelling a modal bootstrap window

在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">&times;</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 更新模态内容和表单的动作属性。