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

Question

У меня есть этот код в YouTube, за которым я следовал, и в какой-то момент он работает без laravel, но когда я использовал его в laravel, у него возникли некоторые проблемы. Я пытаюсь редактировать / обновлять данные из таблицы (html) с помощью модальных, но проблема в том, что данные, которые я получил в моей базе данных (mysql), не отображаются в модальных, единственные данные, которые появляются, это идентификатор элемента в Таблица. Кроме того, когда я печатаю данные на консоли, они дают мне правильные данные Я потратил так много времени на поиски проблемы и решения, но все же я не могу двигаться дальше, поэтому я попытался опубликовать здесь. Надеюсь, кто-нибудь может мне помочь. Это было бы очень здорово. СПАСИБО!

ФАЙЛ ЛЕЗВИЯ / HTML

<div class="modal fade" id="customerEditModal" tabindex="-1" role="dialog" aria-labelledby="" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header" style="color: green;">
            <h5 class="modal-title" id=""><i class="fas fa-edit"></i> Edit Customer Info/Account</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true" style="color: green !important;">&times;</span>
            </button>
        </div>
        <form role="form" method="POST">
        {{ csrf_field() }}
            <div class="modal-body">

                <input class="form-control" type="" name="customer_id" id="customer_id">

                <div class="form-group">
                    <label>Firstname</label>
                    <input name="firstname" id="firstname" value="" class="form-control">
                </div>
                <div class="form-group has-success">
                    <label>Lastname</label>
                    <input name="lastname" id="lastname" type="text" class="form-control" placeholder="">
                </div>
                <div class="form-group has-success">
                    <label>Address</label>
                    <input name="address" id="address" type="text" class="form-control" placeholder="">
                </div>
                <div class="form-group has-success">
                    <label>Phone Number</label>
                    <input name="phone_number" id="phone_number" type="number" class="form-control" placeholder="">
                </div>
                <div class="form-group has-success">
                    <label>Type</label>
                    <select class="form-control" name="type" id="type">
                        <option value="HO">Home Owner</option>
                        <option value="BO">Business Owner</option>
                        <option value="MRF">Material Recovery Facilitaty</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email</label>
                    <input name="email" id="email" type="text" class="form-control" placeholder="">
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input name="password" id="password" type="text" class="form-control"  placeholder="">
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-sm btn-success">Add Customer</button>
            </div>

            </div>
        </form>

        </div>
    </div>
</div>

СЦЕНАРИЙ для AJAX

$('.editbtn').click(function(){
        var customer_id = $(this).attr("id");
        console.log(customer_id);

    $.ajax({
        url:"{{ route('customerEdit') }}",
        method:"get",
        data:{customer_id:customer_id},
        dataType:"json",
        success:function(data){
                $('#customerEditModal').find('#customer_id').val(customer_id);
                // $('#customerEditModal').find('#firstname').val(data.firstname);
                $('#customerEditModal').find('#firstname').val(data.firstname);
                $('#lastname').val(data.lastname);
                $('#address').val(data.address);
                $('#phone_number').val(data.phone_number);
                $('#email').val(data.email);
                $('#password').val(data.password);
                $('#customerEditModal').appendTo('body').modal('show');
                console.log(data);
                console.log(data.firstname);

        },error:function(xhr,status,error){
            var err = eval('('+xhr.responseText+')');
            alert(err.message);
        }
    });
});

КОНТРОЛЛЕР (только функция)

public function customerShowByIdToEdit(Request $request){
        $id = $request->input('customer_id');
        $customer = DB::table('customer')
        ->join('users', 'users.id', 'customer.users_id')
        ->select('customer.id',
                 'customer.firstname as firstname',
                 'customer.lastname as lastname',
                 'customer.address',
                 'customer.phone_number',
                 'customer.type',
                 'users.email',
                 'users.password')
        ->where('customer.id','=', $id)
        ->get();

        return json_encode($customer);
    }

МАРШРУТ ((на web.php)

Route::get('/dashboard/customerEdit', 'CustomerController@customerShowByIdToEdit')->name('customerEdit');

результат из console.log (data): введите описание изображения здесь

Answer 1

Измените последнюю часть запроса ->get(); на ->first(); при извлечении определенной строки.затем попробуйте:

$('#customerEditModal').find('#customer_id').val(data.customer_id);
$('#customerEditModal').find('#firstname').val(data.firstname);
$('#customerEditModal').find('#lastname').val(data.lastname);
$('#customerEditModal').find('#address').val(data.address);
$('#customerEditModal').find('#phone_number').val(data.phone_number);
$('#customerEditModal').find('#email').val(data.email);
$('#customerEditModal').find('#password').val(''); //Either remove this line or ask the user to confirm the password for the update
$('#customerEditModal').modal();

Answer 2

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

Измените идентификатор ввода с firstname на firstnamexxx и затем на AJAX returnВы можете использовать $('#firstnamexxx').val(data.firstname);.

Поскольку идентификатор на опыте должен быть уникальным на 1 загруженной странице, он не может быть одинаковым даже внутри разных элементов (модальных, форм и т. д.).