Как следует применять грамматику лезвия к jquery по запросу Laravel Ajax?

Question

Я пишу код для удаления записей результатов после передачи оператора foreach, но мне интересно, как применить грамматику лезвия к jery.

<table class="table table-hover">
                        @if(Auth::check() && $translationRecords)
                            @foreach($translationRecords as $translationRecord)                            
                                <tr>
                                    <td id="recodeValue{{ $translationRecord->id }}" style="display:none">{{ $translationRecord->id }}</td>

                                    <td>{{ $translationRecord->korean }}</td>

                                    <td>{{ $translationRecord->japanese }}</td>

                                    <td><button id="recodeRemoveBtn{{ $translationRecord->id }}" type="button" class="btn btn-danger float-right">삭제</button></td>

                                </tr>
                            @endforeach
                        @endif    
                    </table>

Аякс

$("#recodeRemoveBtn{{ $translationRecord->id }}").click(function(){
    $.ajax({
        url: '{{route('translation.recode.delete')}}',
        type: 'post',
        data: {_token: "{{ csrf_token() }}",
                'id': $('#recodeValue{{ $translationRecord->id }}').val(),
            },
        success: function (data) {
            alery(data)

        }, error: function () {
            alert("error!!!!");
        }
    });
});

Маршрут

Route::post('translation/delete', 'Home\TranslationController@recodeDelete')->name('translation.recode.delete')->middleware('auth');

Answer 1

Вариант 1

Вы можете решить это с помощью магии лезвия. Просто переберите translationRecords так же, как вы делали для создания строк таблицы.

@foreach($translationRecords as $translationRecord)                            
   ... your ajax snippet repeated for each record ...
@endforeach

Вариант 2

Но более простым способом было бы внедрить идентификатор записи в событие щелчка jQuery. Есть десятки способов приблизиться к этому варианту. Решение здесь использует data-attribute .

Сначала добавьте класс и идентификатор записи к кнопке с атрибутом данных.

<td>
    <button 
         id="recodeValue{{ $translationRecord->id }}"
         type="button" 
         class="btn btn-danger float-right recodeRemoveBtn"
         data-translation-record-id="{{ $translationRecord->id }}
    >
        삭제
    </button>
</td>

Во-вторых, настройте jQuery для применения к любому событию щелчка на кнопке с классом "recodeRemoveBtn"

$("button.recodeRemoveBtn").click(function(){
    $.ajax({
        url: '{{route('translation.recode.delete')}}',
        type: 'post',
        data: {_token: "{{ csrf_token() }}",
                'id': $(this).data("translation-record-id"),
            },
        success: function (data) {
            alert(data)

        }, error: function () {
            alert("error!!!!");
        }
    });
});

Answer 2

в конце клинка вы должны указать маршрут вашего js-архива.Так что click(function() будет звонить.