How to delete the correct record with multiple checkboxes using Ajax

Question

I have a loop that generates rows of data. If I use chrome developer tool, I can see that each row has a unique value for data-host-id. However, when I click on any of the records, it always updates the very first record. It's not honoring the record I would like to update.

Note: I'm not looking to delete multiple records at the same time, I just want to delete the appropriate record via its associated button.

Snippet of HTML code

<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>

snippet of JS code

$(".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'},

Controller

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

Model

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);
}

KmasterYC · Accepted Answer · 2016-08-20 03:50:05Z

1

There are 2 issues:

You have many <input> tags. But you force it to use the same id="api_id". And other actions you write depend on this ID => So you can only access to first item with that ID => Why it causes problem => Solution: move api_id to data-api-id attribute
You should use data() instead of attr() to get HTML data attribute

Try my solution. I think it makes more sense

- 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'},

answered Aug 20, 2016 at 3:50

KmasterYC

2,35413 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to delete the correct record with multiple checkboxes using Ajax

Snippet of HTML code

snippet of JS code

Controller

Model

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Snippet of HTML code

snippet of JS code

Controller

Model

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related