On function Call getting error as Variable is not defined

On function Call getting error as Variable is not defined

I have an HTML table which i am creating with Json Data.I have Three buttons inside my form save,View and Edit edit is initially hidden on clicking on view it shows up.

I have an HTML table which i am creating with Json Data.I have Three buttons inside my form save,View and Edit edit is initially hidden on clicking on view it shows up.

so on clicking view i am calling a function which is doing some work, then again i am clicking on edit and i am calling my addTable(tableData) function it says un defined


$(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 &gt; -1 &amp;&amp; j &gt;= 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 &gt; 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>

  &lt;button type="button" id="view" class="commonButton" onclick="viewData()"&gt;
                &lt;i class="fas fa-eye"&gt;&lt;/i&gt; View
            &lt;/button&gt;
  &lt;button id="edit" type="button" class="commonButton" onclick="editData()" style="display: none"&gt;
                &lt;i class="far fa-edit"&gt;&lt;/i&gt;edit
            &lt;/button&gt;


&lt;/div&gt;

</form> </div>


initially when page loads i am making an ajax call and populating the table in side success function i am calling addTable(tableData) function

  • then user clicks on view and again clicks on edit it shows error as ReferenceError: tableData is not defined as you can see in my code i have commented that line
  • I think it is not able to find tableData
  • So where should i put my editdata function
  • I think i am misplacing the code pattern

On clicking of edit you can see it shows the error on console

The JSON i am getting from back-end.value of 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"}]


javascript jquery html

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Know Everything About HTML With HTML Experts

HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.

HTML JavaScript - Add Javascript File to HTML

Learn HTML and javascript, their uses & importance, html javascript function, javascript tags list, why add javascript file to html, HTML Events with JavaScript etc

Commonly Used HTML Tags with Examples

HTML tags are keywords used in HTML to display web-pages with certain properties. They are further used for defining HTML elements. An HTML element consists of a starting tag.

Building a minesweeper game using Javascript, HTML and CSS

In this article, you'll learn how to build minesweeper using JavaScript, HTML and CSS. I also used jQuery, a JavaScript library that is helpful for interacting with html. Whenever you see a function call with a leading dollar sign, that is jQuery at work

Material Login & Signup Form with CSS, HTML and JavaScript

How we can create a login and signup form with the material design using HTML CSS JavaScript? Solution: See this CSS Material Login & Signup Form With jQuery, Material Design Form.