Не удается получить кнопку удаления для работы с таблицей данных

Question

Я успешно создал список задач без каких-либо проблем.Однако я попытался еще больше адаптировать приложение, чтобы оно также отображало таблицу всех задач.

Все отлично работает, кроме части удаления.

Теперь у меня есть 2 функции jQuery для прослушивания нажатия клавиши удаления (одна для списка и одна для таблицы):

// ============= Remove todo from the list and Database ============
$('.list').on('click', 'span', function(e){
  e.stopPropagation();
  removeTodo($(this).parent());  // Remove todo from the list and 
  Database
})


// ============== Remove todo from the table and Database ==========
  $('tbody').on('click', '.btn-danger', function(e){
    e.stopPropagation();
    table                         // remove row from table - Start
    .row($(this).parents('tr'))   // ...
    .remove()                     // ... 
    .draw()                       // remove row from table - End

    removeOnt($(this).parent());  // Remove from database -  HOWEVER, NOT WORKING
  })

Затем у меня есть функция, которая удаляет задачу:

function removeTodo(todo){
  var clickedId = todo.data('id');             // I know the problem with removing the data from the database when I call the function from the table jQuery call, doesn't work
  var deleteUrl = '/api/todos/' + clickedId; 
  $.ajax({
    method: 'DELETE',
    url: deleteUrl
  })
  .then(function(data){
    todo.remove();
  })
  .catch(function(err){
    console.log(err);
  })
}

Проблема с функцией удаления записи из базы данных с помощью вызова таблицы связана с тем, что " var clickedId = todo.data ('id'); " is " неопределенные ».

Вышеупомянутые данные ('id') из todo.data ('id') определяют функцию "addTodo (todo) {}" как

var newTodo = $('<li class="task">'+todo.name +' <span>X</span></li>');
newTodo.data('id', todo._id);

Это код функции для создания строки таблицы:

function addTodoRow(todo){
  table.row.add([
            todo.name,
            todo.created_date,
            "<button type='button' class='btn btn-danger'>DELETE</button>"
  ]).draw();
  if(todo.completed){
    $('td').addClass('done');
  } 
}

Мой вопрос: как определить эквивалент " newTodo.data ('id ', todo._id);"в функции" addTodoRow (todo)", как мы это делали для" addTodo (todo)"?

Любая помощь приветствуется.

Заранее спасибо.

Стефан

Answer 1

Я нашел способ найти значение и вызвать функцию удаления, чтобы успешно удалить строку и запись mongodb.

Код был изменен следующим образом:

1. Другая функция быладобавлено:

function removeTodo2(todo_id){
  var deleteUrl = '/api/todos/' + todo_id; 
  $.ajax({
    method: 'DELETE',
    url: deleteUrl
  })
  .then(function(data){
    console.log(data)
  })
  .catch(function(err){
    console.log(err);
  })
}

Слушатель jQuery был обновлен для прослушивания при нажатии кнопки удаления и извлечения требуемого значения из строки, чтобы передать его в функцию удаления (removeTodo2 (todo_id)) для удаления записи mongodb.Фу, какой глоток.

//Remove todo from the table and Database
  $('tbody').on('click', '.btn-danger', function(e){
    var test = $(this).parents('tr');
    var test2 = test.find('td:eq(2)')[0].innerHTML;  // Find the mongodb record ID.  Note, for the purpose of this exercise the ID as been added to the row, but would not be done in reality. 
    e.stopPropagation();
    table                         // remove row from table - Start
    .row($(this).parents('tr'))   // ...
    .remove()                     // ... 
    .draw()                       // remove row from table - End
    removeTodo2(test2);  // Remove from database -  HOWEVER, NOT WORKING
  })

Это сработало для моей цели, но я не думаю, что это правильный способ сделать это.

Спасибо за помощь @Sunil Dora

Answer 2

Я проверил ваш код JS для добавления строк в таблицу данных,

function addTodoRow(todo){
  // console.log(todo.name)
  table.row.add([
            todo.name,
            todo.created_date,
            'High',
            'MyName',
            "<button type='button' class='btn btn-danger'>DELETE</button>"
  ]).draw();
  if(todo.completed){
    $('td').addClass('done');
  } 
}

Вот мои предложения,

-> Как будто вы передаете значение для todo.name, todo.created_date .

-> Передать значение вашей записи из базы данных.Как todo.db_record_id

-> и измените следующее в кнопке, новый JS для этого будет

function addTodoRow(todo){
  // console.log(todo.name)
  table.row.add([
            todo.name,
            todo.created_date,
            'High',
            'MyName',
            "<button onclick='removeTodo(+todo.db_record_id+)' type='button' class='btn btn-danger'>DELETE</button>"
  ]).draw();
  if(todo.completed){
    $('td').addClass('done');
  } 
}

-> обновить функцию JS для удалениязапись,

function removeTodo(todo_id){
  console.log(todo.name);
  var deleteUrl = '/api/todos/' + todo_id; 
  $.ajax({
    method: 'DELETE',
    url: deleteUrl
  })
  .then(function(data){
    todo.remove();
  })
  .catch(function(err){
    console.log(err);
  })
}

Попробуйте описанные выше шаги.Надеюсь, это поможет вам.