Невозможно сделать вызов ajax для события click после инициализации datadatable - PullRequest
Новая
       15

Невозможно сделать вызов ajax для события click после инициализации datadatable

0 голосов
/ 25 марта 2020

Я новичок, и я попробовал много предложений в Интернете, но не могу найти решение здесь. Я создал таблицу данных, используя ajax для загрузки некоторых данных. Все работает нормально.

Однако в последнем столбце у меня есть несколько кнопок действий. То, что я пытаюсь сделать, в конце страницы в #comments добавить некоторые другие данные, используя другой jQuery ajax.

После того, как я нажму кнопку, у меня появятся эти ошибки

Предупреждение DataTables: table id = table - Невозможно повторно инициализировать DataTable. Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/3

и в журналах

Uncaught TypeError: $ (...). DataTable не является функцией

, и таблица перезагружается.

Вот код: это индекс. php: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="robots" content="noindex" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>clients</title>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="center_column">
        <table id="test" class="table table-bordered">
            <thead>
                <tr>
                    <th>date creipt</th>
                    <th>id receipt</th>
                    <th>client id</th>
                    <th>phone client</th>
                    <th>employer</th>
                    <th>status</th>
                    <th>info receipt</th>
                    <th>tech comments</th>
                    <th>actions</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
<div id="comments"></div> 
<script type="text/javascript" src="scripts.js"></script>
</body>
</html>

и сценарии. js: 

$(document).ready(function() {
  var table = $("#test").DataTable
  ({
    "order": [[ 1, "desc" ]],
    "processing": true,
    "ajax": {"url": "ajax.txt"},
        "deferRender":    true,
    "paging": true,
    "columns": [
                {data: 'date_reciept'},
                {data: 'id_reciept'},
                {data: 'id_client'},
                {data: 'tel_client'},
                {data: 'employer'},
                {data: 'status'},
                {data: 'info_reciept'},
                {data: 'tech_comments'}
            ],  
      "columnDefs": 
      [ 
      {
        "targets": 8,
        "data":null,
                "createdCell": function (td, cellData, rowData, row, col){
          {$(td).html(buttonaction());} //user,client,receipt,status
        } 

      }
      ]
  });

  $('#test').on('click','.addcomment',function(event)
  {
    receiptid = $(this).parents().eq(3).find('td:eq(1)').html();
    clientid =$(this).parents().eq(3).find('td:eq(2)').html();
    console.log(receiptid+' '+clientid);
    $.ajax({
      method: "POST",
      url: "/projects/orders3/tables/comments.php",
      data: { newjob: receiptid}
    })
      .done(function( msg ) {
        $('#comments').html(msg);

      });
  })


function buttonaction(){
button = `<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Επιλογές
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <a class="dropdown-item addcomment" href="#">Προσθήκη Σχολίου</a>
  <a  class="dropdown-item printa4" href="#">Εκτύπωση Α4</a>
  <a class="dropdown-item print80" href="#">Εκτύπωση ρολό 80mm</a>
  <a  class="dropdown-item updateclient" href="#">Αλλαγή Στοιχείων Πελάτη</a>
  <a  class="dropdown-item updatereceipt" href="#">Αλλαγή Στοιχείων Παραλαβής</a>

</div>
</div>`;
return button;
}


})

и пример данных ajax .txt: 

{
   "draw":1,
   "recordsTotal":4,
   "recordsFiltered":4,
   "data":[
      {
         "date_reciept":"2020-03-16 15:14:08",
         "id_reciept":"2233",
         "name_client":"nametest",
         "lastname_client":"surname test",
         "id_client":"3156",
         "phone_client":"123456789",
         "tel_client":"",
         "brand":"ACER LAPTOP",
         "model":"0",
         "s_number":"0",
         "code_client":"3156",
         "employer":"alex",
         "device_code":"",
         "status":"1",
         "info_reciept":"receipt comments",
         "tech_comments":"tech comments"
      },
       {
         "date_reciept":"2020-03-16 15:14:08",
         "id_reciept":"2233",
         "name_client":"nametest",
         "lastname_client":"surname test",
         "id_client":"3156",
         "phone_client":"123456789",
         "tel_client":"",
         "brand":"ACER LAPTOP",
         "model":"0",
         "s_number":"0",
         "code_client":"3156",
         "employer":"alex",
         "device_code":"",
         "status":"1",
         "info_reciept":"receipt comments",
         "tech_comments":"tech comments"
      },
       {
         "date_reciept":"2020-03-16 15:14:08",
         "id_reciept":"2233",
         "name_client":"nametest",
         "lastname_client":"surname test",
         "id_client":"3156",
         "phone_client":"123456789",
         "tel_client":"",
         "brand":"ACER LAPTOP",
         "model":"0",
         "s_number":"0",
         "code_client":"3156",
         "employer":"alex",
         "device_code":"",
         "status":"1",
         "info_reciept":"receipt comments",
         "tech_comments":"tech comments"
      },
       {
         "date_reciept":"2020-03-16 15:14:08",
         "id_reciept":"2233",
         "name_client":"nametest",
         "lastname_client":"surname test",
         "id_client":"3156",
         "phone_client":"123456789",
         "tel_client":"",
         "brand":"ACER LAPTOP",
         "model":"0",
         "s_number":"0",
         "code_client":"3156",
         "employer":"alex",
         "device_code":"",
         "status":"1",
         "info_reciept":"receipt comments",
         "tech_comments":"tech comments"
      }
   ]
}
...