当我再次单击按钮时，Ajax 请求再次显示数据

Question

I am working on laravel and using ajax for getting data from the database and showing it on popup by clicking on the button.

The problem is once I click the button it shows me data on the popup. but when I close and click again the button it shows popup double data.

Ajax Code:

<script>
  function getMessage(id) {
    $.ajax({
      url: '/gethandlers/' + id,
      type: 'GET',
      success: function (resp) {

        var trHTML = '';
        for (i = 0; i < resp.length; i++) {
          trHTML +=
              '<tr><td>'
              + resp[i]['name']
              + '</td></tr>';
        }

        $('#tBody').append(trHTML);
        $('#myModal').modal('show');

        console.log(resp[0]['name']);

      },

    });
  }
</script>

Route:

Route::get('/gethandlers/{id}', 'ClientsController@gethandlers');

The method in the controller:

public function gethandlers($id)
{
    $data = Multiplehandler::select('handler_id')->where('user_id', $id)->get();
    $total_ids = count($data);
    $handler_names = [];

    foreach ($data as $datas) {
        $handler_names [] =Clients::select('name')->where('id', $datas->handler_id)->first();
    }

    return $handler_names;
}

Answer 1

You are using append but this is not replace the data of your selector, it is just "append".

$('#tBody').append(trHTML);

Use

$('#tBody').html(trHTML);

will fix your problem.