[英]jQuery: dialog() of table data from ajax not showing
$(function () {
$('.referral').on('click', function () {
$('#hold').html($(this).find('DIV').html());
$('#hold').dialog();
});
});
$(function getTableData() {
$.ajax({
url: 'interface_API.php',
data: "",
dataType: 'json',
success: function (data) {
setTimeout(function () {
getTableData()
}, 1000);
var body = document.getElementById('tbody');
body.innerHTML = '';
for (var i in data) {
var row = data[i];
var customerCode = row.CustomerCode;
var phone = row.PhoneNumber;
var thetime = row.TimeStamp;
var tr = document.createElement('TR');
tr.className += " " + "referral";
body.appendChild(tr);
var td = document.createElement('TD');
td.appendChild(document.createTextNode(customerCode));
tr.appendChild(td);
var td = document.createElement('TD');
td.appendChild(document.createTextNode(phone));
tr.appendChild(td);
var td = document.createElement('TD');
td.appendChild(document.createTextNode(thetime));
tr.appendChild(td);
var tr2 = document.createElement('TR');
body.appendChild(tr2);
var td2 = document.createElement('TD');
var divE = document.createElement('DIV');
divE.className += " " + "extra";
var text = document.createTextNode("sage, extra, etc");
divE.appendChild(text);
td2.appendChild(divE);
tr2.appendChild(td2);
}
}
});
});
I have data from a JSON api that is imported using ajax. 我有使用ajax导入的JSON api中的数据。 This is displayed to a table, of which the rows are created using JS.
这显示在一个表中,其中的行是使用JS创建的。
With each row, there is an additional row of 'additional' data that is hidden from the user. 在每一行中,都有对用户隐藏的另一行“其他”数据。 on click of a row, i wish for a dialog to appear displaying this 'additional' data.
在单击一行时,我希望出现一个显示此“其他”数据的对话框。
Initally i tryed todo this with writing out the rows in "raw format" ( var row = "<tr><td>...</td></tr>"
etc) however i read that this does not work well with javascript functions like the one i am trying to execute as the DOM has already been set (i'm not 100% sure about that). 最初,我尝试通过写出“原始格式”的行来完成此操作(
var row = "<tr><td>...</td></tr>"
等),但是我读到这不适用于像我正在尝试执行的javascript函数那样,因为DOM已经设置(我对此不是100%肯定)。 This is why i use JS to create each element & do it correctly, to some respect. 这就是为什么在某些方面我使用JS创建每个元素并正确执行的原因。
However , i am still unable to get the dialog to appear
但是 ,我仍然无法显示对话框
Notes. 笔记。 below the table (html hard coded) is a empty div which is used as a holder for when a dialog is to appear.
表格下方(硬编码html)是一个空的div,用作出现对话框时的保持器。
I have had success before when the data is static & ajax is not involved 在数据静态和不涉及Ajax之前,我已经取得了成功
I found the solution. 我找到了解决方案。 It seems that the JS
.on('click', function()
was not being called, or registered at the right point. i checked on the DOM properties using chrome dev tools & .referral
's onclick property was null. 似乎未调用JS
.on('click', function()
或在正确的位置进行注册。我使用chrome dev工具检查了DOM属性,而.referral
的onclick属性为null。
Instead, i set the onclick
attribute of each <TR>
with the function clicks()
like so: 相反,我使用函数
clicks()
设置每个<TR>
的onclick
属性,如下所示:
var tr = document.createElement('TR');
tr.setAttribute("onclick", "clicks(this)");
With, 与,
function clicks(param){
$('#hold').html($(param).find('DIV').html());
$('#hold').dialog();
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.