Cannot call methods on table prior to initialization; attempted to call method 'refresh'

Question

I want to list all the data from the database table to the HTML page. There are a total of 3 rows of data currently, but only 2 rows of data are listed.

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');
}

I expect all data to be listed but only 2 rows of data were listed. [Uncaught Error: cannot call methods on table prior to initialization; attempted to call method 'refresh'.] I made use of the jquery mobile page id and it gets rid of the error but there are still missing data. Please help, thank you so much.

When the page loads, you need to do `$("#CoTable").table()` (with possible options as an argument) to initialize the table. — Barmar, Oct 04 '19 at 18:52
@Barmar The api mentions it will automatically initialize if the table has `data-mode="reflow"` on it. So this may be more of a timing issue of when `getSearchResults` is called. — Taplar, Oct 04 '19 at 18:53
@Taplar It's presumably called in the callback of an AJAX request that performs the search. So the jquery-mobile library should have been loaded by then. — Barmar, Oct 04 '19 at 19:02
Remove `pageinit` function. Add `$('#CoTable').table('rebuild');`. — Omar, Oct 08 '19 at 12:14
@Omar Hi, it gave me a similar error [Uncaught Error: cannot call methods on table prior to initialization; attempted to call method 'rebuild'] — min, Oct 08 '19 at 17:28
Then remove it all together. If you publish the table on page load, then there's no need to call any enhancement method. — Omar, Oct 09 '19 at 07:44

score 1 · Answer 1 · answered Oct 19 '19 at 11:21

For JQM table widget the method is called rebuild (reference: https://api.jquerymobile.com/table/).

Because of the asynchronous behavior of the http request, You may don't know when the response will be received, so IMHO the simplest way to handle that response is to check if the table widget has been already instanced or not, and then invoke the needed method:

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>

No worries about the event sequence.

Here is a plunker: https://plnkr.co/edit/S8m8BPYnsfUFklYLwEz7?p=preview

Cannot call methods on table prior to initialization; attempted to call method 'refresh'

1 Answers1