Блог

Главная - Вопросы по программированию - Как вызвать ajax для получения данных для расширения строки таблицы для получения дополнительной информации

Как вызвать ajax для получения данных для расширения строки таблицы для получения дополнительной информации

#javascript #jquery #ajax

#javascript #jquery #ajax

Вопрос:

В приведенном ниже вызове ajax переменная shtml пуста. Как правильно присвоить значение переменной? Если я возвращаю его внутри функции успеха, я получаю ошибку «Uncaught TypeError: не удается прочитать свойство ‘show’ неопределенного». row.child(moreinfo(row.data())).show(); 

 function moreinfo(d) {
  var shtml = "";
  $.ajax({
    type: "GET",
    url: Url   parseInt(d[1]),
    contentType: "application/json",
    dataType: "json",
    success: function(data) {
      shtml = '<table" cellspacing="0" border="0"style="width: 100%;" >'  
        '<tr>'  
        '<td>Description:</td>'  
        '<td>'   data.description   '</td>'  
        '</tr>'  
        '</table>';

    },
    error: function(xhr, textStatus, errorThrown) {
      alert(errorThrown.responseText);

    }
  });
  return shtml;


}

$('#Ptable tbody').on('click', 'td.details-control', function() {
  var tr = $(this).closest('tr');
  var row = table.row(tr);
  if (row.child.isShown()) {
    // This row is open - close 
    row.child.hide();
    tr.removeClass('shown');
  } else {
    // Open this row
    row.child(moreinfo(row.data())).show();
    tr.addClass('shown');
  }
});

Комментарии:

1. вы можете сделать это с помощью Promise или в качестве второго параметра функции moreinfo другой функции, которая принимает обратный вызов и выполняет дальнейшую работу

Ответ №1:

Поскольку вы работаете с ajax ним, он будет выполняться асинхронно. Таким образом, при выполнении $.ajax( он не будет ждать, пока придет ответ, и перейдет к следующей строке, return shtml; поэтому вы shtml всегда будете возвращаться "" .

Чтобы решить вашу проблему, вы можете изменить свой код, как показано ниже.

  1. Обновите параметры в moreinfo as moreinfo(row, tr) .
  2. Получить d значение внутри moreinfo с let d = row.data(); помощью .
  3. Добавить row.child(shtml).show(); и tr.addClass('shown'); внутренний success обратный вызов из $.ajax .
  4. Вызов moreinfo(row, tr); из click .
 // update function parameter
function moreinfo(row, tr) {
  // get data
  let d = row.data();

  $.ajax({
    type: "GET",
    url: Url   parseInt(d[1]),
    contentType: "application/json",
    dataType: "json",
    success: function(data) {
      var shtml = '<table" cellspacing="0" border="0"style="width: 100%;" >'  
        '<tr>'  
        '<td>Description:</td>'  
        '<td>'   data.description   '</td>'  
        '</tr>'  
        '</table>';

      // Open this row
      // Add html to child
      row.child(shtml).show();
      tr.addClass('shown');

    },
    error: function(xhr, textStatus, errorThrown) {
      alert(errorThrown.responseText);

    }
  });
}

$('#Ptable tbody').on('click', 'td.details-control', function() {
  var tr = $(this).closest('tr');
  var row = table.row(tr);
  if (row.child.isShown()) {
    // This row is open - close 
    row.child.hide();
    tr.removeClass('shown');
  } else {
    // Open this row
    moreinfo(row, tr);
  }
});