由于未定义变量，在函数上调用会出错

Question

我有一个用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"}]

Answer 1

是的，因为您没有在编辑函数中声明变量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是否无效或您需要更多帮助

Answer 2

您的问题是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

}

Answer 3

x函数无法访问editdata，这就是为什么会出错的原因。

您可以在外部范围内定义tableData变量，并在ajax调用后为该变量赋值：

tableData

现在var tableData; $(document).ready(function() { ... success: function(tableDataResponse) { tableData = tableDataResponse; // assign value to our global variable addTable(tableData); ... 可以访问editData。

希望能提供帮助。

Answer 4

<!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