javascript - 无法在初始化之前调用表上的方法;试图调用方法“刷新”
问题描述
我想将数据库表中的所有数据列出到 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 行数据。[未捕获的错误:无法在初始化之前调用表上的方法;试图调用方法“刷新”。] 我使用了 jquery 移动页面 ID,它消除了错误,但仍然缺少数据。请帮忙,非常感谢。
解决方案
对于 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
顺序。
这是一个 plunker:https ://plnkr.co/edit/S8m8BPYnsfUFklYLwEz7?p=preview
推荐阅读
- java - Tomcat 9 较慢地跳过所有 jars tld 扫描,将 defaultTldScan 设置为 false
- php - 注册后登录,auth()->user()在DashboardController中返回null
- r - R如何通过以随机比率在特定时间拆分给定数字来生成样本数
- sql - 如何检查特定记录的日期列是否在该月份中最早?
- c# - 如果它已经打开,显示现有的应用程序而不是打开另一个
- pandas - 按日期的累积总和数据帧
- angular - 类型“事件”不可分配给类型“字符串”。角度打字稿错误
- docker - Docker镜像的远程部署
- javascript - jQuery 仅在具有特定类的另一个 div 的 div 中运行函数
- spring-boot - 找到一种从 Java 15 / Spring Boot 保存到 HSQLDB 的简单方法