Обновление изображения в модальном Yajra Datatable

Question

Я пытаюсь обновить изображение. Я пытался найти ответ, но мне кажется, что они не работают на моем. Я нажимаю кнопку, модальное окно не появляется. Заранее спасибо.

Это мой контроллер:

public function edit($id)
    {
        if (request()->ajax()) {
            $shippings = Shipping_data::findOrFail($id);
            return response()->json(['result' => $shippings]);
        }
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Shipping_data $shippings_data)
    {
        $rules = array(
            'name' ,
            'mobile',
            'items',
            'shippingAddress',
            'amount',
            'facebookLink',
            'facebookName',
            "modePayment",
            "shipVia"=> 'required',
            "trackingNumber"=> 'required',
            "shippingReceipt"=> 'required',
            "shippingCharged"=> 'required',
            "shippingWeight"=> 'required'
        );

        $error = Validator::make($request->all(), $rules);

        if ($error->fails()) {
            return response()->json(['errors' => $error->errors()->all()]);
        }

    
         // Handle File Upload
        if ($request->hasFile('shippingReceipt')) {
            // Get filename with the extension
            $filenameWithExt = $request->file('shippingReceipt')->getClientOriginalName();
            // Get just filename
            $filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
            // Get just ext
            $extension = $request->file('shippingReceipt')->getClientOriginalExtension();
            // Filename to store
            $fileNameToStore= $filename.'_'.time().'.'.$extension;
            // Upload Image
            $path = $request->file('shippingReceipt')->storeAs('public/shippingReceipts', $fileNameToStore);
        }else {
            $fileNameToStore = '';
        }

        $form_data = array(
            'name' => $request->name,
            'mobile'=> $request->mobile,
            'items'=> $request->items,
            'shippingAddress'=> $request->shippingAddress,
            'amount'=> $request->amount,
            'facebookLink'=> $request->facebookLink,
            'facebookName'=> $request->facebookName,
            "modePayment"=> $request->modePayment,
            "shipVia"=> $request->shipVia,
            "trackingNumber"=> $request->trackingNumber,
            "shippingReceipt"=> $request->fileNameToStore,
            "shippingWeight"=> $request->shippingWeight,
            "shippingCharged"=> $request->shippingCharged,
        );

        Shipping_data::whereId($request->hidden_id)->update($form_data);


        return response()->json(['success' => 'Shipping Data is successfully updated']);
    }

Это мой клинок. php:

@extends('layouts.navbar')
@section('content')
<br />
<br />
<br />
<a href="{{url('shipping/create')}}" class="btn btn-success pull-right" style="margin-right: 1%;">Add Order Data</a>
<br>
<br>
<!-- Table -->
<div style="margin: 10px 15px;">
    <table id="shipping_table" class="table table-bordered table-striped ">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Mobile Number</th>
                <th scope="col">Item Orders</th>
                <th scope="col">Shipping Address</th>
                <th scope="col">Amount</th>
                <th scope="col">Facebook Link</th>
                <th scope="col">Facebook Name</th>
                <th scope="col">Mode of Payment</th>
                <th scope="col">Ship Via</th>
                <th scope="col">Tracking Number</th>
                <th scope="col">Shipping Receipt</th>
                <th scope="col">Shipping Charged</th>
                <th scope="col">Shipping Weight</th>
                <th>Action</th>
            </tr>
        </thead>
    </table>
</div>
<br />
<br />
<!-- End Table -->
</body>

</html>

<!-- Modal -->
<div id="formModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title text-center">Add Shipping Data</h4>
            </div>
            <div class="modal-body">
                <span id="form_result"></span>
                <form method="post" id="shipping_form" class="form-horizontal">
                    @csrf
                    @if(Auth::check() && Auth::user()->role == "admin")
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" name="name" placeholder="Please Enter Client Name"
                            id="name">
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Mobile</label>
                        <input type="text" class="form-control" name="mobile" placeholder="Please Enter Mobile Number"
                            id="mobile">
                    </div>
                    <div class="form-group">
                        <label>Items Order</label>
                        <input type="text" class="form-control" name="items" placeholder="Please Enter Items Order"
                            id="items">
                    </div>
                    <div class="form-group">
                        <label>Shipping Address</label>
                        <input type="text" class="form-control" name="shippingAddress" id="shippingAddress"
                            placeholder="Please Enter Shipping Address">
                    </div>
                    <div class="form-group">
                        <label>Amount</label>
                        <input type="text" class="form-control" name="amount" placeholder="Please Enter Amount"
                            id="amount">
                    </div>
                    <div class="form-group">
                        <label>Facebook Link</label>
                        <input type="text" class="form-control" name="facebookLink" id="facebookLink"
                            placeholder="Please Enter Facebook Link">
                    </div>
                    <div class="form-group">
                        <label>Facebook Name</label>
                        <input type="text" class="form-control" name="facebookName" id="facebookName"
                            placeholder="Please Enter Facebook Name">
                    </div>

                    <div class="form-group">
                        <label>Mode of Payment</label>
                        <input type="text" class="form-control" name="modePayment" id="modePayment"
                            placeholder="Please Enter Mode of Payment">
                    </div>
                    @endif
                    @if(Auth::check() && Auth::user()->role == "employee")
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" name="name" placeholder="Please Enter Name" id="name"
                            READONLY>
                    </div>
                    <div class="form-group">
                        <label>Mobile</label>
                        <input type="text" class="form-control" name="mobile" placeholder="Please Enter Mobile Number"
                            id="mobile" READONLY>
                    </div>
                    <div class="form-group">
                        <label>Items Order</label>
                        <input type="text" class="form-control" name="items" placeholder="Please Enter Items Order"
                            id="items" READONLY>
                    </div>
                    <div class="form-group">
                        <label>Shipping Address</label>
                        <input type="text" class="form-control" name="shippingAddress" id="shippingAddress" READONLY
                            placeholder="Please Enter Shipping Address">
                    </div>
                    <div class="form-group">
                        <label>Amount</label>
                        <input type="text" class="form-control" name="amount" placeholder="Please Enter Amount"
                            id="amount" READONLY>
                    </div>
                    <div class="form-group">
                        <label>Facebook Link</label>
                        <input type="text" class="form-control" name="facebookLink" id="facebookLink" READONLY
                            placeholder="Please Enter Facebook Link">
                    </div>
                    <div class="form-group">
                        <label>Facebook Name</label>
                        <input type="text" class="form-control" name="facebookName" id="facebookName" READONLY
                            placeholder="Please Enter Facebook Name">
                    </div>

                    <div class="form-group">
                        <label>Mode of Payment</label>
                        <input type="text" class="form-control" name="modePayment" id="modePayment" READONLY
                            placeholder="Please Enter Mode of Payment">
                    </div>
                    @endif
                    <div class="form-group">
                        <label>Shipping Via</label>
                        <input type="text" class="form-control" name="shipVia" placeholder="Please Enter Shipping Via"
                            id="shipVia">
                    </div>
                    <div class="form-group">
                        <label>Tracking Number</label>
                        <input type="text" class="form-control" name="trackingNumber" id="trackingNumber"
                            placeholder="Please Enter Tracking Number">
                    </div>
                    <div class="form-group">
                        <label>Shipping Receipt</label>
                        <br>
                        <input type="file" class="form-control file-form" name="shippingReceipt" id="shippingReceipt">
                    </div>
                    <div class="form-group">
                        <label>Shipping Charged</label>
                        <input type="text" class="form-control" name="shippingCharged" id="shippingCharged"
                            placeholder="Please Enter Shipping Charged">
                    </div>
                    <div class="form-group">
                        <label>Shipping Weight</label>
                        <input type="text" class="form-control" name="shippingWeight" id="shippingWeight"
                            placeholder="Please Enter Shipping Weight">
                    </div>

                    <br />
                    <div class="form-group" align="center">
                        <input type="hidden" name="action" id="action" value="Add" />
                        <input type="hidden" name="hidden_id" id="hidden_id" />
                        <input type="submit" name="action_button" id="action_button" class="btn btn-success"
                            value="Add" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div id="confirmModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h2 class="modal-title">Confirmation</h2>
            </div>
            <div class="modal-body">
                <h4 align="center" style="margin:0;">Are you sure you want to remove this data?</h4>
            </div>
            <div class="modal-footer">
                <button type="button" name="ok_button" id="ok_button" class="btn btn-danger">OK</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal -->

<script>
    $(document).ready(function () {
        $('#shipping_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('shipping.index') }}",
            },
            columns: [
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'mobile',
                    name: 'mobile'
                },
                {
                    data: 'items',
                    name: 'items'
                },
                {
                    data: 'shippingAddress',
                    name: 'shippingAddress'
                },
                {
                    data: 'amount',
                    name: 'amount'
                },
                {
                    data: 'facebookLink',
                    name: 'facebookLink'
                },
                {
                    data: 'facebookName',
                    name: 'facebookName'
                },
                {
                    data: 'modePayment',
                    name: 'modePayment'
                },
                {
                    data: 'shipVia',
                    name: 'shipVia'
                },
                {
                    data: 'trackingNumber',
                    name: 'trackingNumber'
                },
                {
                    data: 'shippingReceipt',
                    name: 'shippingReceipt',
                    "render": function (data, type, full, meta) {
                        return "<img src=\"storage/shippingReceipts/" + data + "\" height=\"50\"/>";
                    },
                },
                {
                    data: 'shippingCharged',
                    name: 'shippingCharged'
                },
                {
                    data: 'shippingWeight',
                    name: 'shippingWeight'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                }
            ]
        });
        $('#create_record').click(function () {
            $('.modal-title').text('Add Client Data');
            $('#action_button').val('Add Client Data');
            $('#action').val('Add');
            $('#form_result').html('');
            $('#formModal').modal('show');
        });
        $('#shipping_form').on('submit', function (event) {
            event.preventDefault();
            var action_url = '';
            if ($('#action').val() == 'Add') {
                action_url = "{{ route('shipping.store') }}";
            }
            if ($('#action').val() == 'Edit') {
                action_url = "{{ route('shipping.update') }}";
            }
            $.ajax({
                url: action_url,
                method: "POST",
                data: $(this).serialize(),
                dataType: "json",
                success: function (data) {
                    var html = '';
                    if (data.errors) {
                        html = '<div class="alert alert-danger">';
                        for (var count = 0; count < data.errors.length; count++) {
                            html += '<p>' + data.errors[count] + '</p>';
                        }
                        html += '</div>';
                    }
                    if (data.success) {
                        html = '<div class="alert alert-success">' + data.success + '</div>';
                        $('#shipping_form')[0].reset();
                        $('#shipping_table').DataTable().ajax.reload();
                    }
                    $('#form_result').html(html);
                }
            });
        });
        $(document).on('click', '.edit', function () {
            var id = $(this).attr('id');
            $('#form_result').html('');
            $.ajax({
                url: "/shipping/" + id + "/edit",
                dataType: "json",
                success: function (data) {
                    $('#name').val(data.result.name);
                    $('#mobile').val(data.result.mobile);
                    $('#items').val(data.result.items);
                    $('#shippingAddress').val(data.result.shippingAddress);
                    $('#amount').val(data.result.amount);
                    $('#facebookLink').val(data.result.facebookLink);
                    $('#facebookName').val(data.result.facebookName);
                    $('#modePayment').val(data.result.modePayment);
                    $('#shipVia').val(data.result.shipVia);
                    $('#trackingNumber').val(data.result.trackingNumber);
                    $('#shippingReceipt').val(data.result.shippingReceipt);
                    $('#shippingCharged').val(data.result.shippingCharged);
                    $('#shippingWeight').val(data.result.shippingWeight);
                    $('#hidden_id').val(id);
                    $('.modal-title').text('Edit Record');
                    $('#action_button').val('Save');
                    $('#action').val('Edit');
                    $('#formModal').modal('show');
                }
            })
        });
        var shipping_id;
        $(document).on('click', '.delete', function () {
            shipping_id = $(this).attr('id');
            $('#confirmModal').modal('show');
        });
        $('#ok_button').click(function () {
            $.ajax({
                url: "shipping/destroy/" + shipping_id,
                beforeSend: function () {
                    $('#ok_button').text('Deleting...');
                },
                success: function (data) {
                    setTimeout(function () {
                        $('#confirmModal').modal('hide');
                        $('#shipping_table').DataTable().ajax.reload();
                    }, 2000);
                }
            })
        });
    });
</script>
@endsection

Answer 1

Вы не можете просматривать изображение в поле ввода, но вы можете сделать это с помощью тега img:

<img class="img-circle" id="view_photo">

Измените эту строку:

$('#shippingReceipt').val(data.result.shippingReceipt);

To,

$("#view_photo").attr("src", data.result.shippingReceipt);