CODEWITHSUNDEEP
javascriptjqueryjquery-mobilejquery-mobile-table
min
min

Reputation: 1

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

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.

Upvotes: 0

Views: 969

Answers (1)

deblocker
deblocker

Reputation: 7705

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

Upvotes: 1

Related Questions