my browser showing message like this, because i'am lopping button with onclick function(). is there any other solution??

Error handling response: TypeError: self.processResponse is not a function at chrome-extension://cmkdbmfndkfgebldhnkbfhlneefdaaip/js/notification.js:154:10

my code html with some blade looping from laravel

<div  id="gender">
    <table  id="genders-table">
        <thead>
            <tr>
                <th>Jenis Kelamin</th>
                <th>Is Active</th>
                <th colspan="3">Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($genders as $gender)
            <tr>
                <td>{{ $gender->jenis_kelamin }}</td>
                <td>{{ $gender->is_active }}</td>
                <td width="120">
                    <div class='btn-group'>
                        <a href="{{ route('genders.show', [$gender->id]) }}" class='btn btn-default btn-xs'>
                            <i ></i>
                        </a>
                        <a href="{{ route('genders.edit', [$gender->id]) }}" class='btn btn-default btn-xs'>
                            <i ></i>
                        </a>

                        <button class='hapus btn btn-danger btn-xs' id='hapus' onclick="hapus(<?= $gender->id  ?>)"><i class='far fa-trash-alt'></i></button>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

my js code. get id from lopping and make ajax call

function hapus(genderId) {
        bootbox.confirm("Do you really want to delete record?", function(result) {
            if (result) {
                $.ajax({
                    url: '{{ url("api/genders/") }}'   '/'   genderId,
                    dataType: "JSON",
                    type: "DELETE",
                    data: genderId,
                    success: function(data, textStatus, xhr, response) {
                        // alert(true === 1);
                        if (data.success == true) {

                            $('#gender').load(" #genders-table", function() {
                                alert("data berhasil di hapus")
                            })

                        } else {
                            bootbox.alert('Record not deleted.');
                        }
                    }
                })
            }

        })
    }

CodePudding user response：

Your error is not from YOUR code but from a Chrome extension called "WhatRuns"

Also IDs need to be unique so I strongly recommend to delegate the click from the container and use data-attribute for the id

document.querySelector("#genders-table tbody").addEventListener("click", function(e) {
  const tgt = e.target.closest(".hapus");
  if (tgt) {
    const genderId = tgt.dataset.genderid;
    console.log(genderId)
    bootbox.confirm("Do you really want to delete record?", function(result) {
      if (result) {
        $.ajax({
          url: '{{ url("api/genders/") }}'   '/'   genderId,
          dataType: "JSON",
          type: "DELETE",
          data: genderId,
          success: function(data, textStatus, xhr, response) {
            // alert(true === 1);
            if (data.success == true) {
              $('#gender').load(" #genders-table", function() {
                alert("data berhasil di hapus")
              })
            } else {
              bootbox.alert('Record not deleted.');
            }
          }
        })
      }
    })
  }
})

<div  id="gender">
  <table  id="genders-table">
    <thead>
      <tr>
        <th>Jenis Kelamin</th>
        <th>Is Active</th>
        <th colspan="3">Action</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>Bla 1</td>
        <td>Bla 1.1</td>
        <td width="120">
          <div class='btn-group'>
            <a href="#" class='btn btn-default btn-xs'>
              <i ></i>
            </a>
            <a href="#" class='btn btn-default btn-xs'><i ></i></a>

            <button class='hapus btn btn-danger btn-xs'  data-genderid="<?= $gender->id  ?>"><i class='far fa-trash-alt'></i></button>
          </div>
        </td>
      </tr>

      <tr>
        <td>Bla 2</td>
        <td>Bla 2.1</td>
        <td width="120">
          <div class='btn-group'>
            <a href="#" class='btn btn-default btn-xs'>
              <i ></i>
            </a>
            <a href="#" class='btn btn-default btn-xs'>
              <i ></i>
            </a>

            <button class='hapus btn btn-danger btn-xs' data-genderid="<?= $gender->id  ?>"><i class='far fa-trash-alt'></i></button>
          </div>
        </td>
      </tr>

    </tbody>
  </table>
</div>