提交并将值保存到数据库后，有没有办法让我的模式在 Laravel 中保持打开状态？

Question

我正在 Laravel 8 中上传一个文件，其中有一个 bootstrap 动态工作模式。一切正常，但我想进一步提高我的输出： 1) 在不刷新页面的情况下通过模态更新我的一个表单？ 2) 如果验证失败，请保持模态打开并将错误打印到模态而不是我的重定向页面？

非常感谢你抽出时间来帮助我。

my form for updating the file

<form action="{{ route('storefile' , $requisition->id) }}" method="POST"
enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="form-group row">
<div class="col-sm-12">
    <label for="title"> Account Status: </label>
    <select class="form-control" name="acc_status">
        <option value="0" {{ $requisition->acc_status == 0 ? 'selected' : '' }}> Inactive
        </option>
        <option value="1" {{ $requisition->acc_status == 1     ? 'selected' : '' }}> Active
        </option>
    </select>
</div>
<div class="col-sm-12 pt-4">
    <label for="title"> Account document File: </label>
    <div>
        @if (!empty($requisition->acc_document))
        <label class="badge-success">
            {{ $requisition->acc_document }}
        </label>
        @else
        <label class="badge-danger">
            Nothing uploaded </label>
        @endif
    </div>
    <input type="file" name="acc_document" class="form-control" id="acc_document" />
</div>
</div>
<div class="card-footer">
<div class="row">
    <div class="col-md-6 text-left">
        <input type="submit" value="Upload document" class="btn btn-primary">
    </div>
</div>
</div>
</div>
</form>

my controller and route

public function uploadFile($id) {
$requisition = Requisition::find($id);
return view('requisition.createFile' , compact('requisition'));

}

public function storeFile(Request $request , $id) {

$request->validate([
    'acc_status'            => 'required',
    'acc_document'          => 'required|mimes:doc,docx,pdf,txt,zip|max:2000',
]);
    $requisition = Requisition::find($id);
    $requisition->acc_status =  $request->get('acc_status');
    $FileName = uniqid() .$request->file('acc_document')->getClientOriginalName();
    $path = $request->file('acc_document')->storeAs('uploads', $FileName , 'public');
    $requisition->acc_document = '/storage/' . $path;
    }
    $requisition->save();
    //$requisition->update($request->all());

return back()
    ->with('success', 'Your file has been uploaded successfully.');
}

Route::get('upload/{id}', [RequisitionController::class, 'uploadFile'])->name('upload'); Route::put('requisition/{id}/files', [RequisitionController::class, 'storeFile'])->name('storefile');

and last part my modal and ajax in my index page to upload the file and popup will open

<div class="col-md-6">
<a style="display:inline-block; text-decoration:none; margin-right:10px;"
    class="text-secondary" data-toggle="modal" id="mediumButton"
    data-target="#mediumModal" title="upload"
    data-attr="{{ route('upload' , $requisition->id)  }}">
    <i class="fas fa-upload"></i>
</a>
</div>

<script>
// display a modal (medium modal)
$(document).on('click', '#mediumButton', function(event) {
    event.preventDefault();
    let href = $(this).attr('data-attr');
    $.ajax({
        url: href,
        beforeSend: function() {
            $('#loader').show();
        },
        // return the result
        success: function(result) {
            //  @if (count($errors) > 0) @endif
            $('#mediumModal').modal("show");
            $('#mediumBody').html(result).show();
            $("#date-picker").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'yy-mm-dd'
            });
        } ,
        complete: function() {
            $('#loader').hide();
        },
        error: function(jqXHR, testStatus, error) {
            console.log(error);
            alert("Page " + href + " cannot open. Error:" + error);
            $('#loader').hide();
        },
        timeout: 8000
    });

});
</script>

<!-- medium modal -->
<div class="modal fade" id="mediumModal" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body" id="mediumBody">
                <form id="modal-form" method="get">
                    <div>
                        <!-- the result of displayed apply here -->
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

我想要实现的看起来像enter image description here

Answer 1

有几种方法可以做这种事情。一种方法是做这样的事情：

Html:

<div class="modal" id="the-modal">
    <form action="{{ $theAction }}" method="POST" id="the-form">
        <input type="text" name="input-name" id="the-input">
        <button type="submit">
    </form>
    <p id="the-text"></p>
</div>

在您的控制器中，如果一切正常，您将return一个错误或一个 200 响应。

public function theAction(Request $request , $id) {
    //Do stuff

    if (!$error) {
        return response("OK"); //This will return a 200 response
    } else {
        return response("An error happened", 500); //This will return a 500 error
    }
}

然后，在您的 JS 中，您将拦截表单提交，然后，您将能够将错误与正常消息分开：

<script>
$("#the-form").on('submit', function(event) {
    event.preventDefault();

    let theInput = $("#the-input");
    $.ajax({
        url: theUrl,
        data: {
            the-input: theInput
        }
        // 200 response
        success: function(result) {
            $("#the-text").empty();
            $("#the-text").append(result.repsonse);
        } ,
        error: function(jqXHR, testStatus, error) {
            $("#the-text").empty();
            $("#the-text").append(error.response);
        }
    });

});
</script>

如果你想在模态中做所有这些事情，概念是一样的：你拦截表单提交，发送到控制器，return 将错误响应和 200 响应分开，然后手动更新inputs/texts.

我没有测试代码，但这个概念应该可行。

提交并将值保存到数据库后，有没有办法让我的模式在 Laravel 中保持打开状态？

Is there is a way to keep my modal open in Laravel after submit and save the values to db?

ajax

laravel

bootstrap-modal