我有一个用Json Data创建的HTML表。我的表单save
,View
和Edit
中有三个按钮,最初在单击显示的视图时被隐藏上。
因此,在单击视图时,我调用的是正在执行某些工作的函数,然后再次单击编辑,然后调用的addTable(tableData)
函数却表示未定义
$(document).ready(function() {
$('.loader').show();
$('.overlay').show();
$.ajax({
url: "CategoryOlWiseFilter",
method: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(tableData) {
addTable(tableData);
$('.loader').hide();
$('.overlay').hide();
$("#divHide").show();
}
});
$("#clear").click(function() {
if (confirm("Want to clear?")) {
$('.dataReset').val(0);
}
return false;
});
$("#CategoryName").on("change", function() {
var selectedOption = this.value;
console.log(selectedOption);
var itemRows = document.getElementsByClassName("item-row");
if (selectedOption === "All") {
for (var i = 0; i < itemRows.length; i++) {
itemRows[i].style.visibility = "visible";
}
} else {
for (var i = 0; i < itemRows.length; i++) {
itemRows[i].style.visibility = "collapse";
}
var selectedItemRows = document.querySelectorAll("[data-category='" + selectedOption + "']");
for (var i = 0; i < selectedItemRows.length; i++) {
selectedItemRows[i].style.visibility = "visible";
}
}
});
});
var itemsQuantiry = [];
function addTable(tableData) {
var col = Object.keys(tableData[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1);
var colNum = col.length;
for (var i = 0; i < colNum + 1; i++) {
var th = document.createElement("th");
if (i >= colNum) {
th.innerHTML = "Quantity";
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head");
} else {
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head");
}
}
for (var i = 0; i < tableData.length; i++) {
tr = table.insertRow(-1);
tr.classList.add("item-row");
for (var j = 0; j < col.length + 1; j++) {
var categoryName = tableData[i]["Category Name"];
tr.dataset.category = categoryName;
let tabCell = tr.insertCell(-1);
var hiddenField = document.createElement("input");
hiddenField.style.display = "none";
var quantityField = document.createElement("input");
var tabledata = tableData[i][col[j]];
if (i > -1 && j >= colNum) {
quantityField.style.border = "none";
quantityField.style["text-align"] = "right";
quantityField.setAttribute("name", "Quantity");
quantityField.setAttribute("autocomplete", "on");
if (itemsQuantiry[i]) {
quantityField.setAttribute("value", itemsQuantiry[i]);
} else {
quantityField.setAttribute("value", "0");
}
quantityField.setAttribute("index", i);
quantityField.setAttribute("type", "number");
quantityField.setAttribute("required", "required");
quantityField.classList.add("dataReset");
quantityField.toLocaleString('en-IN');
tabCell.appendChild(quantityField);
} else {
if (tableData[i]["Item Code"] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute("name", "Item_Code");
hiddenField.setAttribute("value", tabledata);
tabCell.appendChild(hiddenField);
}
if (tableData[i]["Item Name"] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute("name", "Item_Name");
hiddenField.setAttribute("value", tabledata);
tabCell.appendChild(hiddenField);
}
if (tableData[i]["Category Name"] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute("name", "Category_Name");
hiddenField.setAttribute("value", tabledata);
tabCell.appendChild(hiddenField);
}
if (j > 1) tabCell.classList.add("text-right");
}
}
}
var divContainer = document.getElementById("HourlysalesSummary");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
function editData() {
$('#CategoryName').val('All');
$('#view').show();
$('#edit').hide();
addTable(tableData); // here i am getting the error
}
$(".dataReset").on("change", function(e) {
itemsQuantiry[$(this).attr('index')] = e.target.value;
});
$("#save").click(function() {
var outlet = $('#outlet');
if (outlet.val() === 'Select Outlet') {
alert("Please Select An Outlet!");
$('#outlet').focus();
return false;
} else return;
});
function viewData() {
var quantityFields = document.getElementsByClassName("dataReset");
for (var i = 0; i < quantityFields.length; i++) {
if (quantityFields[i].value != 0) {
quantityFields[i].closest(".item-row").style.visibility = "visible";
} else {
quantityFields[i].closest(".item-row").style.display = "none";
}
}
$('#CategoryName').val('All');
$('#view').hide();
$('#edit').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container" id="divHide">
<form action="InsertQuantityIndent" method="post" id="indentForm" autocomplete="on">
<div class="row position-relative">
<div class="col-lg-4 brder">
<h5 id="commonHeader">Outlet Name</h5>
<select class="test" id="outlet" name="outlet">
<option>Select Outlet</option>
</select>
</div>
<div class="col-lg-4">
<h5 id="commonHeader">Outlet Code</h5>
<select class="test" id="outletCode" name="outletCode">
<option>Outlet Code</option>
</select>
</div>
<div class="col-lg-4">
<h5 id="commonHeader">Category</h5>
<select class="test" id="CategoryName" name="categoryCode">
<option>All</option>
</select>
</div>
</div>
<hr style="border: 1px solid black">
<div class="table-responsive">
<table class="w-100" id=HourlysalesSummary></table>
</div>
<div>
<button type="submit" id="save" class="commonButton">
<i class="fas fa-save"></i> Save
</button>
<button type="button" id="view" class="commonButton" onclick="viewData()">
<i class="fas fa-eye"></i> View
</button>
<button id="edit" type="button" class="commonButton" onclick="editData()" style="display: none">
<i class="far fa-edit"></i>edit
</button>
</div>
</form>
</div>
最初,当页面加载时,我正在进行ajax调用,并在侧面成功函数中填充表,而我正在调用addTable(tableData)
函数
view
,然后再次单击edit
,它显示为ReferenceError: tableData is not defined
的错误,正如您在我的代码中看到的那样,我已经对该行加了注释tableData
editdata
函数放在哪里点击修改后,您会看到它在控制台上显示错误
我从tableData
的back-end.value获得的JSON
[{"Item Code":"1978","Item Name":"Alu Chat-S","Category Name":"Chats"},{"Item Code":"1979","Item Name":"Dahi Alu Chat-S","Category Name":"Chats"},{"Item Code":"1980","Item Name":"Samosa-S","Category Name":"Chats"},{"Item Code":"1981","Item Name":"SamosaChat-S","Category Name":"Chats"},{"Item Code":"1982","Item Name":"Dahi Samosa Chats-S","Category Name":"regular"},{"Item Code":"1983","Item Name":"Garam Samosa Chats-S","Category Name":"regular"},{"Item Code":"1984","Item Name":"Kachori Chats-S","Category Name":"regular"},{"Item Code":"1985","Item Name":"Garam Kachori Chat-S","Category Name":"regular"},{"Item Code":"1986","Item Name":"Dahi Kachori Chat-S","Category Name":"fastfood"},{"Item Code":"1987","Item Name":"Dai Raj Kachori-S","Category Name":"fastfood"},{"Item Code":"1988","Item Name":"Baby Kachori Chat-S","Category Name":"fastfood"},{"Item Code":"1989","Item Name":"Dahi Baby Kachori-S","Category Name":"fastfood"},{"Item Code":"1990","Item Name":"Anar Bhalla-S","Category Name":"fastfood"},{"Item Code":"1991","Item Name":"Dahi Bhalla-S","Category Name":"fastfood"},{"Item Code":"1992","Item Name":"Jhal Muri-S","Category Name":"fastfood"},{"Item Code":"1993","Item Name":"Chat Platter-S","Category Name":"fastfood"},{"Item Code":"1994","Item Name":"Dahi Papdi Chat-S","Category Name":"GIFT PACK"}]
答案 0 :(得分:0)
是的,因为您没有在编辑函数中声明变量tableData,所以当然是不确定的
您可以按表ID获取表的数据以供参考,请检查此Get data of table by table id
现在您需要像这样修改编辑功能
SELECT * FROM
users u
LEFT JOIN following f ON u.[insert_primary_key_here]=f.[insert_foreign_key_here]
WHERE u.username != 'loggedInUser'
AND f.username1 = 'loggedInUser'
AND f.username2 = u.username
让我知道id是否无效或您需要更多帮助
答案 1 :(得分:0)
您的问题是tableData属于以下行的Ajax调用范围:
success: function(tableData) {
您可以使其可用,但将其分配给该范围之外的变量,并分配给与editData相同的范围,例如:
var returned_data;
$(document).ready(function() {
然后在ajax中更新成功功能:
success: function(tableData) {
addTable(tableData);
returned_data = tableData;
然后可以在editData中调用它
function editData() {
$('#CategoryName').val('All');
$('#view').show();
$('#edit').hide();
addTable(returned_data); // here i am getting the error
}
答案 2 :(得分:0)
x
函数无法访问editdata
,这就是为什么会出错的原因。
您可以在外部范围内定义tableData
变量,并在ajax调用后为该变量赋值:
tableData
现在var tableData;
$(document).ready(function() {
...
success: function(tableDataResponse) {
tableData = tableDataResponse; // assign value to our global variable
addTable(tableData);
...
可以访问editData
。
希望能提供帮助。
答案 3 :(得分:0)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" id="divHide">
<form action="InsertQuantityIndent" method="post" id="indentForm" autocomplete="on">
<div class="row position-relative">
<div class="col-lg-4 brder">
<h5 id="commonHeader">Outlet Name</h5>
<select class="test" id="outlet" name="outlet">
<option>Select Outlet</option>
</select>
</div>
<div class="col-lg-4">
<h5 id="commonHeader">Outlet Code</h5>
<select class="test" id="outletCode" name="outletCode">
<option>Outlet Code</option>
</select>
</div>
<div class="col-lg-4">
<h5 id="commonHeader">Category</h5>
<select class="test" id="CategoryName" name="categoryCode">
<option>All</option>
</select>
</div>
</div>
<hr style="border: 1px solid black">
<div class="table-responsive">
<table class="w-100" id=HourlysalesSummary></table>
</div>
<div>
<button type="submit" id="save" class="commonButton">
<i class="fas fa-save"></i> Save
</button>
<button type="button" id="view" class="commonButton" onclick="viewData()">
<i class="fas fa-eye"></i> View
</button>
<button id="edit" type="button" class="commonButton" onclick="editData()" style="display: none">
<i class="far fa-edit"></i>edit
</button>
</div>
</form>
</div>
</body>
<script>
var tableData = [{"Item Code":"1978","Item Name":"Alu Chat-S","Category Name":"Chats"},{"Item Code":"1979","Item Name":"Dahi Alu Chat-S","Category Name":"Chats"},{"Item Code":"1980","Item Name":"Samosa-S","Category Name":"Chats"},{"Item Code":"1981","Item Name":"SamosaChat-S","Category Name":"Chats"},{"Item Code":"1982","Item Name":"Dahi Samosa Chats-S","Category Name":"regular"},{"Item Code":"1983","Item Name":"Garam Samosa Chats-S","Category Name":"regular"},{"Item Code":"1984","Item Name":"Kachori Chats-S","Category Name":"regular"},{"Item Code":"1985","Item Name":"Garam Kachori Chat-S","Category Name":"regular"},{"Item Code":"1986","Item Name":"Dahi Kachori Chat-S","Category Name":"fastfood"},{"Item Code":"1987","Item Name":"Dai Raj Kachori-S","Category Name":"fastfood"},{"Item Code":"1988","Item Name":"Baby Kachori Chat-S","Category Name":"fastfood"},{"Item Code":"1989","Item Name":"Dahi Baby Kachori-S","Category Name":"fastfood"},{"Item Code":"1990","Item Name":"Anar Bhalla-S","Category Name":"fastfood"},{"Item Code":"1991","Item Name":"Dahi Bhalla-S","Category Name":"fastfood"},{"Item Code":"1992","Item Name":"Jhal Muri-S","Category Name":"fastfood"},{"Item Code":"1993","Item Name":"Chat Platter-S","Category Name":"fastfood"},{"Item Code":"1994","Item Name":"Dahi Papdi Chat-S","Category Name":"GIFT PACK"}];
$(document).ready(function() {
$('.loader').show();
$('.overlay').show();
$.ajax({
url: "CategoryOlWiseFilter",
method: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(data) {
tableData = data;
console.log(tableData);
addTable(tableData);
$('.loader').hide();
$('.overlay').hide();
$("#divHide").show();
}
});
$("#clear").click(function() {
if (confirm("Want to clear?")) {
$('.dataReset').val(0);
}
return false;
});
$("#CategoryName").on("change", function() {
var selectedOption = this.value;
console.log(selectedOption);
var itemRows = document.getElementsByClassName("item-row");
if (selectedOption === "All") {
for (var i = 0; i < itemRows.length; i++) {
itemRows[i].style.visibility = "visible";
}
} else {
for (var i = 0; i < itemRows.length; i++) {
itemRows[i].style.visibility = "collapse";
}
var selectedItemRows = document.querySelectorAll("[data-category='" + selectedOption + "']");
for (var i = 0; i < selectedItemRows.length; i++) {
selectedItemRows[i].style.visibility = "visible";
}
}
});
});
var itemsQuantiry = [];
function addTable(tableData) {
console.log(1);
var col = Object.keys(tableData[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1);
var colNum = col.length;
for (var i = 0; i < colNum + 1; i++) {
var th = document.createElement("th");
if (i >= colNum) {
th.innerHTML = "Quantity";
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head");
} else {
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head");
}
}
for (var i = 0; i < tableData.length; i++) {
tr = table.insertRow(-1);
tr.classList.add("item-row");
for (var j = 0; j < col.length + 1; j++) {
var categoryName = tableData[i]["Category Name"];
tr.dataset.category = categoryName;
let tabCell = tr.insertCell(-1);
var hiddenField = document.createElement("input");
hiddenField.style.display = "none";
var quantityField = document.createElement("input");
var tabledata = tableData[i][col[j]];
if (i > -1 && j >= colNum) {
quantityField.style.border = "none";
quantityField.style["text-align"] = "right";
quantityField.setAttribute("name", "Quantity");
quantityField.setAttribute("autocomplete", "on");
if (itemsQuantiry[i]) {
quantityField.setAttribute("value", itemsQuantiry[i]);
} else {
quantityField.setAttribute("value", "0");
}
quantityField.setAttribute("index", i);
quantityField.setAttribute("type", "number");
quantityField.setAttribute("required", "required");
quantityField.classList.add("dataReset");
quantityField.toLocaleString('en-IN');
tabCell.appendChild(quantityField);
} else {
if (tableData[i]["Item Code"] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute("name", "Item_Code");
hiddenField.setAttribute("value", tabledata);
tabCell.appendChild(hiddenField);
}
if (tableData[i]["Item Name"] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute("name", "Item_Name");
hiddenField.setAttribute("value", tabledata);
tabCell.appendChild(hiddenField);
}
if (tableData[i]["Category Name"] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute("name", "Category_Name");
hiddenField.setAttribute("value", tabledata);
tabCell.appendChild(hiddenField);
}
if (j > 1) tabCell.classList.add("text-right");
}
}
}
var divContainer = document.getElementById("HourlysalesSummary");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
function editData() {
$('#CategoryName').val('All');
$('#view').show();
$('#edit').hide();
if (typeof tableData != 'undefined' && tableData != '') {
alert('before edit');
addTable(tableData);
}// here i am getting the error
}
$(".dataReset").on("change", function(e) {
itemsQuantiry[$(this).attr('index')] = e.target.value;
});
$("#save").click(function() {
var outlet = $('#outlet');
if (outlet.val() === 'Select Outlet') {
alert("Please Select An Outlet!");
$('#outlet').focus();
return false;
} else return;
});
function viewData() {
var quantityFields = document.getElementsByClassName("dataReset");
for (var i = 0; i < quantityFields.length; i++) {
if (quantityFields[i].value != 0) {
quantityFields[i].closest(".item-row").style.visibility = "visible";
} else {
quantityFields[i].closest(".item-row").style.display = "none";
}
}
$('#CategoryName').val('All');
$('#view').hide();
$('#edit').show();
}
</script>
</html>
是的,没有定义tableData,您正在超出范围使用它。为此,您需要在文档就绪内声明它并在其中分配成功响应。为避免错误,您必须实现未定义而不是空检查。请参阅下面的代码:-
$(document).ready(function() {
$('.loader').show();
$('.overlay').show();
var tableData = '';
成功调用后,为tableData分配值,您还应该在API返回404时处理失败响应。
success: function(data) {
tableData = data;
addTable(tableData);
内部editData函数可以处理
function editData() {
$('#CategoryName').val('All');
$('#view').show();
$('#edit').hide();
if (typeof tableData != 'undefined' && tableData != '') {
addTable(tableData);
}// here i am getting the error