Drop-downs are not showing in my HTML table while calling ajax or putting static JSON

Question

I have an HTML table with dropdowns. What I am doing is on clicking on a button. I am showing HTML Table which are having dropdowns, but the issue I am facing is an error which is:

TypeError: t is null; can't access its "setAttribute" property

I am using Bootstrap4 drop-down.

Here is my code:

 var currentlyClickedOutlet=""; $(document).ready(function() { $('#button').click(function() { var data = [{ "amount": 476426, "billdate": "2018-09-01", "outlet": "JAYANAGAR" }, { "amount": 92141, "billdate": "2018-09-01", "outlet": "MALLESHWARAM" }, { "amount": 115313, "billdate": "2018-09-01", "outlet": "KOLAR" }, { "amount": 511153, "billdate": "2018-09-02", "outlet": "JAYANAGAR" }, { "amount": 115704, "billdate": "2018-09-02", "outlet": "MALLESHWARAM" }, { "amount": 83597, "billdate": "2018-09-02", "outlet": "KOLAR" }, { "amount": 167421, "billdate": "2018-09-03", "outlet": "JAYANAGAR" }, { "amount": 53775, "billdate": "2018-09-03", "outlet": "KOLAR" }, { "amount": 269712, "billdate": "2018-09-04", "outlet": "JAYANAGAR" }, { "amount": 58850, "billdate": "2018-09-04", "outlet": "MALLESHWARAM" }, { "amount": 82999, "billdate": "2018-09-04", "outlet": "KOLAR" } ] let formatData = function(data) { let billdates = []; let outlets = []; data.forEach(element => { if (billdates.indexOf(element.billdate) == -1) { billdates.push(element.billdate); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); return { data: data, billdates: billdates, outlets: outlets, }; }; let renderTable = function(data, divId, filterdata) { billdates = data.billdates; outlets = data.outlets; data = data.data; let tbl = document.getElementById(divId); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "Bill_____Date"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; let outletWiseTotal = {}; th = document.createElement("th"); th.innerHTML = "Total1"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; data.forEach(el => { if (el.outlet == element) { outletWiseTotal[element] += parseInt(el.amount); } }); grandTotal += outletWiseTotal[element]; }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.innerHTML = outletWiseTotal[element]; th.classList.add("text-right"); headerRow.appendChild(th); }); th = document.createElement("th"); th.innerHTML = grandTotal; th.classList.add("text-right"); // grand total headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); billdates.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; outlets.forEach(outlet => { let el = 0; data.forEach(d => { if (d.billdate == element && d.outlet == outlet) { total += parseInt(d.amount); el = d.amount; } }); td = document.createElement("td"); a = document.createElement("a"); td.classList.add("text-right"); td.classList.add("dropdown"); a.classList.add("btn"); a.classList.add("btn-secondary"); a.classList.add("actionButton"); a.classList.add("btn"); a.classList.add("btn-secondary"); a.classList.add("dropdown-toggle"); a.classList.add("dropdown-toggle-split"); a.setAttribute("data-place", outlet); /* this one to get which column is clicked*/ /* a.classList.add("text-center"); */ a.setAttribute("data-toggle", "dropdown"); a.innerHTML = el; td.appendChild(a); row.appendChild(td); }); td = document.createElement("td"); td.innerHTML = total; td.classList.add("text-right"); row.insertBefore(td, row.children[1]); tbody.appendChild(row); }); table.appendChild(tbody); tbl.innerHTML = ""; tbl.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } let formatedData = formatData(data); renderTable(formatedData, 'tbl', ''); $dropdown = $("#contextMenu"); $(".actionButton").click(function() { //move dropdown menu $(this).after($dropdown); //update links $(this).dropdown(); currentlyClickedOutlet = $(this).attr("data-place"); /* which column header is clicked (JAYANAGAR,MALLESHWARAM,KOLAR) */ console.log(currentlyClickedOutlet) }); }); }); 

 <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <button id="button" class="btn btn-default" type="submit">Search</button> <div id="tbl"></div> <div class="dropdown-menu" id="contextMenu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> 

I don't know where I am going wrong.

Answer 1

The click event of .contextMenu is defined before any element with the class contextMenu is available.

Moving the following code down should fix the issue

$dropdown = $("#contextMenu");
    $(".actionButton").click(function() {
      //move dropdown menu
      $(this).after($dropdown);
      //update links
      $(this).dropdown();
    });

The final code would be like the following.

 $(document).ready(function() { $('#button').click(function() { var data = [{ "amount": 476426, "billdate": "2018-09-01", "outlet": "JAYANAGAR" }, { "amount": 92141, "billdate": "2018-09-01", "outlet": "MALLESHWARAM" }, { "amount": 115313, "billdate": "2018-09-01", "outlet": "KOLAR" }, { "amount": 511153, "billdate": "2018-09-02", "outlet": "JAYANAGAR" }, { "amount": 115704, "billdate": "2018-09-02", "outlet": "MALLESHWARAM" }, { "amount": 83597, "billdate": "2018-09-02", "outlet": "KOLAR" }, { "amount": 167421, "billdate": "2018-09-03", "outlet": "JAYANAGAR" }, { "amount": 53775, "billdate": "2018-09-03", "outlet": "KOLAR" }, { "amount": 269712, "billdate": "2018-09-04", "outlet": "JAYANAGAR" }, { "amount": 58850, "billdate": "2018-09-04", "outlet": "MALLESHWARAM" }, { "amount": 82999, "billdate": "2018-09-04", "outlet": "KOLAR" } ] let formatData = function(data) { let billdates = []; let outlets = []; data.forEach(element => { if (billdates.indexOf(element.billdate) == -1) { billdates.push(element.billdate); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); return { data: data, billdates: billdates, outlets: outlets, }; }; let renderTable = function(data, divId, filterdata) { billdates = data.billdates; outlets = data.outlets; data = data.data; let tbl = document.getElementById(divId); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "Bill_____Date"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; let outletWiseTotal = {}; th = document.createElement("th"); th.innerHTML = "Total1"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; data.forEach(el => { if (el.outlet == element) { outletWiseTotal[element] += parseInt(el.amount); } }); grandTotal += outletWiseTotal[element]; }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.innerHTML = outletWiseTotal[element]; th.classList.add("text-right"); headerRow.appendChild(th); }); th = document.createElement("th"); th.innerHTML = grandTotal; th.classList.add("text-right"); // grand total headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); billdates.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; outlets.forEach(outlet => { let el = 0; data.forEach(d => { if (d.billdate == element && d.outlet == outlet) { total += parseInt(d.amount); el = d.amount; } }); td = document.createElement("td"); a = document.createElement("a"); td.classList.add("text-right"); td.classList.add("dropdown"); a.classList.add("btn"); a.classList.add("btn-secondary"); a.classList.add("actionButton"); a.classList.add("btn"); a.classList.add("btn-secondary"); a.classList.add("dropdown-toggle"); a.classList.add("dropdown-toggle-split"); /* a.classList.add("text-center"); */ a.setAttribute("data-toggle", "dropdown"); a.innerHTML = el; td.appendChild(a); row.appendChild(td); }); td = document.createElement("td"); td.innerHTML = total; td.classList.add("text-right"); row.insertBefore(td, row.children[1]); tbody.appendChild(row); }); table.appendChild(tbody); tbl.innerHTML = ""; tbl.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); } let formatedData = formatData(data); renderTable(formatedData, 'tbl', ''); $dropdown = $("#contextMenu"); $(".actionButton").click(function() { //move dropdown menu $(this).after($dropdown); //update links $(this).dropdown(); }); }); }); 

 <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <button id="button" class="btn btn-default" type="submit">Search</button> <div id="tbl"></div> <div class="dropdown-menu" id="contextMenu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div>