Невозможно вызвать методы таблицы до инициализации;попытался вызвать метод «обновить» - PullRequest
Новая
       45

Невозможно вызвать методы таблицы до инициализации;попытался вызвать метод «обновить»

0 голосов
/ 04 октября 2019

Я хочу вывести все данные из таблицы базы данных на страницу HTML. В настоящее время существует всего 3 строки данных, но в списке есть только 2 строки данных.

HTML. 

<script src="lib/jquery-1.11.2.min.js"></script>
<script src="lib/jquery.mobile-1.4.5.min.js"></script>
<div class="expandable-content">
    <div id="SearchResult" class="ui-content">
        <table data-role="table" data-mode="reflow" class="uiresponsive" id="CoTable">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Personnel</th>
                    <th>License</th>
                </tr>
            </thead>
            <tbody id="mybody"></tbody>
        </table>
    </div>
</div>

JS. 

function searchperson() {
    var xmlhttp = new XMLHttpRequest();
    var url = serverURL() + "/searchfriends.php";
    url += "?userid=" + localStorage.getItem("userid") + "&search=" + 
    $("#search").val();

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        getSearchResults(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function getSearchResults(response) {
    var arr = JSON.parse(response);
    var i;
    $("#mybody").find("tr").remove();
    for (i = 0; i < arr.length; i++) {
        $("#mybody").append("<tr><td>" + arr[i].userid +
            "</td><td>"
            + arr[i].personnel + "</td><td>"
            + arr[i].license + "</td></tr>");
    }

    $('#Results').bind('pageinit', function () {
    $('#CoTable').table('refresh');
    //$("#CoTable").table('refresh');
}

Я ожидаю, что все данные будут перечислены, но только 2 строки данных были перечислены. [Uncaught Error: невозможно вызвать методы для таблицы до инициализации;попытался вызвать метод refresh.] Я использовал идентификатор мобильной страницы jquery, и он избавился от ошибки, но все еще отсутствуют данные. Пожалуйста, помогите, большое спасибо.

1 Ответ

0 голосов
/ 19 октября 2019

Для виджета таблицы JQM метод называется rebuild (ссылка: https://api.jquerymobile.com/table/).

Из-за асинхронного поведения http-запроса вы можете не знать, когдаответ будет получен, поэтому ИМХО самый простой способ обработать этот ответ - проверить, был ли уже создан экземпляр таблицы, а затем вызвать необходимый метод: 

function isInstanceOf(id, widget) {
  var el = document.getElementById(id);
  return !!$.data(el, 'mobile-' + widget);
}

function addRow(id, evt) {
  var html = '',
      $table = $('#' + id),
      isInstance = isInstanceOf(id, 'table'),
      tableMethod = isInstance ? 'rebuild' : null;

  html += '<tr>';
  html += '<td>' + id + '</td>';
  html += '<td>' + evt + '</td>';
  html += '<td>' + isInstance + '</td>';
  html += '<td>' + (isInstance ? tableMethod : '[create]') + '</td>';
  html += '</tr>';
  $table.find('tbody').append(html);
  $table.table(tableMethod);
}

$(document).ready(function() {
    addRow("CoTable", "DomReady");
});
$(document).on("pagecontainercreate", function(e, ui) {
    addRow("CoTable", e.type);
} );
$(document).on("tablecreate", function(e, ui) {
    addRow(e.target.id, e.type);
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
</head>

<body>
  <div data-role="page">
    <div data-role="header" data-theme="b">
      <h1>jQuery Mobile Table</h1>
    </div>
    <div data-role="content">
      <table data-role="table" data-mode="reflow" id="CoTable" class="ui-responsive">
        <thead>
          <tr>
            <th data-priority="1">Id</th>
            <th data-priority="persist">Source</th>
            <th data-priority="2">Instanced</th>
            <th data-priority="3">Method</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</body>

</html>

Не беспокойтесь о последовательности event.

Вот плункер: https://plnkr.co/edit/S8m8BPYnsfUFklYLwEz7?p=preview

...