Как удалить правильную запись с несколькими флажками с помощью Ajax

Question

У меня есть цикл, который генерирует строки данных. Если я использую инструмент разработчика Chrome, я вижу, что каждая строка имеет уникальное значение для data-host-id. Однако, когда я нажимаю на любую из записей, она всегда обновляет первую запись. Это не честь записи, которую я хотел бы обновить.

Примечание: Я не хочу удалять несколько записей одновременно, я просто хочу удалить соответствующую запись через связанную с ней кнопку.

Отрывок из HTML кода

<input data-size="mini" type="checkbox" class="switch-api" 
    data-on-text="Yes" data-off-text="No" id="api_id" data-host-id="{{ $k }}" checked> 

фрагмент JS кода

$(".switch-api").bootstrapSwitch(); 
$('.switch-api').on('switchChange.bootstrapSwitch', function (event, state) { 
if (state) { 
    $.ajax({ 
     url: '/dashboard/'+ $('#api_id').attr('data-host-id') + '/toggleapicheck', 
     data: { api_id: $('#api_id').attr('data-host-id'), state:'true'}, 

Контроллер

public function toggleapicheck(Request $request) 
{ 
    $api_id = $request->input('api_id'); 
    $state = $request->input('state'); 
    $dashboard = new Dashboard(); 
    $dashboard->toggleApicheck($api_id, $state); 
} 

Модель

function toggleApicheck($api_id, $state) 
{ 
    $sf = new \SensioLabs\Consul\ServiceFactory(array('base_url' => "http://127.0.0.1:8500")); 
    $kv = $sf->get('kv'); 
    $kv->put('apichecks/'.$api_id.'/enable',$state); 
} 

Answer 1

Есть 2 вопроса:

1. У вас есть много <input> tags. Но вы вынуждаете его использовать тот же id="api_id". А другие действия, которые вы пишете зависят от этого ID => Таким образом, вы можете только доступ к первыйэлемент с этим идентификатором => Почему это вызывает проблемы => Решение: перейти api_id к data-api-id атрибут
2. Вы должны использовать данные() вместо ATTR(), чтобы получить HTML данные атрибутов

Попробуйте мою Soluti на. Я думаю, что это имеет смысл

- HTML

<input data-size="mini" type="checkbox" class="switch-api" 
    data-on-text="Yes" data-off-text="No" data-api-id="api_id" data-host-id="{{ $k }}" checked> 

- JS

$(".switch-api").bootstrapSwitch(); 
$('.switch-api').on('switchChange.bootstrapSwitch', function (event, state) { 
if (state) { 
    $.ajax({ 
     url: '/dashboard/'+ $(this).data('host-id') + '/toggleapicheck', 
     data: { api_id: $(this).data('api-id'), state:'true'},