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>