Блог

Я загружаю файл в Laravel 8 с одним загрузочным модалом, который работает динамически. все работает нормально, но я хочу еще больше улучшить свой результат: 1) Обновить одну из моих форм через модальную, не обновляя страницу? 2) оставьте модальную версию открытой, если проверка завершилась неудачно, и распечатайте ошибки в модальной версии вместо моей страницы перенаправления?

Я буду признателен, если вы поможете мне.

моя форма для обновления файла

 <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>
 

мой контроллер и маршрут

 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');

и последняя часть мои модальные и ajax на моей индексной странице для загрузки файла, и откроется всплывающее окно

 <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

 

то, что я хочу реализовать, выглядит как введите описание изображения здесь

Есть несколько способов сделать что-то подобное. Один из способов сделать это — сделать что-то вроде этого:

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>
 

В вашем контроллере вы вернете ошибку или ответ 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 вы будете перехватывать отправку формы, а затем сможете отделять ошибки от сообщений ok:

 <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>
 

Если вы хотите делать все это внутри модальности, концепция та же: вы перехватываете отправку формы, отправляете на контроллер, возвращаете отдельные ответы на ошибки и 200 ответов, а затем вручную обновляете входные данные / тексты.

Я не тестировал код, но концепция должна работать.