Как выбрать опцию laravel при редактировании ajax - PullRequest
Новая
       0

Как выбрать опцию laravel при редактировании ajax

1 голос
/ 07 января 2020

У меня есть данные, возвращаемые в таблицу на ajax, и в этих данных у меня также есть форма редактирования.

В моей форме редактирования у меня есть опции выбора, данные которых являются динамическими c и возвращаются идеально, но Я не могу добавить выбранный атрибут к сохраненному параметру в базе данных (он всегда показывает первый)

Снимок экрана

Как вы можете видеть на этом снимке экрана, моя форма редактирования не может получить правильную опцию при выборе.

one

ПРИМЕЧАНИЕ:

Если бы мои данные возвращались лезвием l oop @foreach(), я бы выбрал свой правильный вариант с помощью что-то вроде этого: 

{{ $location->province_id == $province->id ? 'selected' : '' }}


<option value="{{$province->id}}"  {{ $location->province_id == $province->id ? 'selected' : '' }}>{{$province->name}}</option>

но так как мой l oop находится в ajax коде, я не могу использовать этот метод.

Код

HTML

<table id="dataTableLocations" class="table table-striped table-bordered">
    <thead>
    <tr>
        <th width="30">Seq No.</th>
        <th>Name</th>
        <th>Customer</th>
        <th>Province</th>
        <th>City</th>
        <th>Address</th>
        <th>Postal Code</th>
        <th width="120">Options</th>
    </tr>
    </thead>
    <tbody id="table_dataLocations"></tbody>
</table>

Script

Я прокомментировал мои опции выбора в коде, чтобы вы могли быстрее их найти 

//ajax call (rest of the code

success:function(data){

// return existed data to locations
$('#table_dataLocations').html('');
$(data.locations).each(function(_, i){
    var url = '{{ route("customer-locations.destroy", ":id") }}';
    url = url.replace(':id', i.id);

    var row = `<tr data-id="${i.id}">'+
    '<td>${i.seqNo}</td>'+
    '<td>${i.name}</td>'+
    '<td>${i.customer.name}</td>'+
    '<td>${i.province.name}</td>'+
    '<td>${i.city.name}</td>'+
    '<td>${i.address}</td>'+
    '<td>${i.postalCode}</td>'+
    '<td width="120">
        <button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#editModal-${i.id}">
        Edit
        </button>
        <!-- edit -->
        <div class="modal fade effect-flip-horizontal editModalLocation" id="editModal-${i.id}" tabindex="-1" role="dialog" aria-labelledby="editModal-${i.id}Label">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="editModal-${i.id}Label">Edit ${i.name}</h4>
                    </div>
                    <form id="updateLocation" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="modal-body">
                        <div class="row" style="margin-bottom:7px;">
                            <div class="col-md-6">
                                <div class="form-group" style="width:100%">
                                    <div class="sm-form-design">
                                    <textarea style="width:100%" name="addressLocationUpdate" id="addressLocationUpdate" cols="30" rows="10" class="form-control" placeholder="Please enter your customer address." >${i.address}</textarea>
                                        <label class="control-label">Address</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12 sm-form-design" style="margin-bottom:7px;">
                                    // Provinces select
                                        <select style="width:100%" class="form-control" name="province_idLocationUpdate" id="province_idLocationUpdate">
                                            @foreach($provinces as $province)
                                            <option value="{{$province->id}}">{{$province->name}}</option>
                                            @endforeach
                                        </select>
                                        <label class="control-label">Province</label>
                                    </div>
                                    <div class="col-md-12 sm-form-design" style="margin-bottom:7px;">
                                    // Cities select
                                        <select style="width:100%" class="form-control" name="city_idLocationUpdate" id="city_idLocationUpdate">
                                            @foreach($cities as $city)
                                            <option value="{{$city->id}}">{{$city->name}}</option>
                                            @endforeach
                                        </select>
                                        <label class="control-label">City</label>
                                    </div>
                                    <div class="col-md-12 sm-form-design" style="margin-bottom:7px;">
                                        <div class="form-group" style="width:100%">
                                            <div class="sm-form-design">
                                                <input style="width:100%" type="text" value="${i.postalCode}" name="postalCodeUpdate" id="postalCodeUpdate" class="form-control" placeholder="Please enter your customer postalC code." required>
                                                <label class="control-label">Postal Code</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="row" style="margin-bottom:7px;">
                            <div class="col-md-3">
                                <div class="form-group" style="width:100%">
                                    <div class="sm-form-design">
                                        <input type="text"  style="width:100%" name="seqNoUpdate" id="seqNoUpdate" value="${i.seqNo}" class="form-control" placeholder="Please enter your location seqNo." required>
                                        <label class="control-label">seqNo</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-9">
                                <div class="form-group" style="width:100%">
                                    <div class="sm-form-design">
                                        <input type="text" style="width:100%" value="${i.name}"  name="nameLocUpdate" id="nameLocUpdate" class="form-control" placeholder="Please enter your location name." required>
                                        <label class="control-label">Name</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" data-id="${i.id}" class="btn locationUpdate btn-success">Update</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </div>
        <!-- ./Edit -->
        <Form id="deleteForm" method="post" action="${url}"> @csrf @method("DELETE")<button type="submit" data-id="${i.id}" class="btn btn-sm customerDelete btn-danger">Delete</button></form>
    </td>'
    '</tr>`;
    $('#table_dataLocations').append(row);
});
// rest of the code

Вопрос

Как я могу выбрать правильный вариант в моей форме редактирования?

Обновить

Я добавил l oop к своему коду, например: 

$.each(data.cities, function(key, value) {
    //value.id == city id
    //i.city_id == locations city_id
    if(value.id == i.city_id)
    {
        $('select[name="city_idLocationUpdate"]').append('<option value="'+ value.id +'" selected>'+ value.name +'</option>');
    }
    else
    {
        $('select[name="city_idLocationUpdate"]').append('<option value="'+ value.id +'">'+ value.name +'</option>');
    }
});

Это работает, но проблема в том, что для всех моих местоположений он получает город последней строки в таблице, а сама последняя строка пуста.

Пример:

местоположений таблица :: 

row 1 = city abc
row 2 = city def
row 3 = city xyz

показывает город xyz для строк 1 и 2, но строка 3 пуста!

PS: здесь i общий экран запишите, если мое объяснение было недостаточно ясным.

Ответы [ 2 ]

0 голосов
/ 07 января 2020

Решено

Я отказался от обработчика ajax и вернул свой @foreach в html (так же, как мой первый код выше)

И затем я изменил его как: 

@foreach($cities as $city)

  <option value="{{$city->id}}" ${`{{$city->id}}` == i.city_id ? 'selected' : ''}>{{$city->name}}</option>
                                                                                @endforeach

В основном я использовал мой php метод в возвращенном html. 

 ${`{{$city->id}}` == i.city_id ? 'selected' : ''}

Надеюсь, это поможет другим.

0 голосов
/ 07 января 2020

Вы можете сделать это разделить ваш стол как лезвие и вернуть его из ajax. Используя лезвие, вы теперь можете выбрать целевое значение. 

Route::get('/ajaxTableDelete', 'Controller@myAjax');

public function myAjax() {
  $province = $provinceData;
  $cities= $cities;
  return view('view.deleteTable', ['province'=>$province,'cities'=>$cities]->render();
}

deleteTable.blade. php

// put your table here

Через ajax 

success:function(data){
  $('#table_dataLocations').append(data);
}


$.each(data.cities, function(key, value) {
     $('select[name="city_idLocationUpdate"]')
    .append(`<option value="${value.id}" ${value.id == i.city_id ? 'selected' : ''}>${value.name}</option>`)

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...