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

Question

I am uploading a file in Laravel 8 with having one bootstrap modal which works dynamically . everything is working fine but I want to improve my output more: 1) Update one of my forms through a modal without refreshing the page? 2) keep the modal open if the validation fails and print the errors to modal instead of my redirect page?

I will appreciate your time helping me.

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

what I want to implement looks like enter image description here

Answer 1

There are several ways to do this kind of thing. One way to do it, is to do something like this:

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>

In your Controller you will return an error or an 200 response, if everything is ok.

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

Then, in your JS, you'll intercept form submission and then, you're going to be able to separate errors from ok messages:

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

If you want to do all this stuff inside a modal, the concept is just the same: You intercept form submission, send to controller, return separate responses for errors and 200 responses, and then update manually the inputs/texts.

I did't test the code, but the concept should work.