1

I set a popover with a content that contains table with thead and tbody with its unique id. If I manually write document.getElementById("servicesEx-popTable_content");on browser console, the console shows me the element. But When I set its innerHTML dynamically, the error says Cannot read property 'innerHTML' of null.

When I check the checkbox, A row should be inserted in tbody and when I uncheck the checkbox, inserted row should be removed. 

document.addEventListener("click", function(x) {
  if (x.target && x.target.id === "cbox") {
    if (x.target.checked === true) {
      var t = document.getElementById("servicesEx-popTable_content");
      t.innerHTML += "<tr><td id='popover-1'></td>some name<td>1</td><td>$50</td></tr>";
    } else {
      var t = document.getElementById("popover-1");
      t.parentNode.removeChild(t);
    }
  }
});

$(function() {
  $('[data-toggle="popoverEx"]').popover({
    container: 'body',
    placement: 'bottom',
    html: true,
    viewport: 'body',
    content: function() {
      return "<table class='table services-popTable'><thead><tr><th>Name</th><th>Quantity</th><th>Price</th></tr></thead><tbody id='servicesEx-popTable_content'></tbody></table>";
    }
  });
});
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>

<div>
  <span style="cursor: pointer;" data-toggle="popoverEx" data-content="">Click to see popover</span> &nbsp;
  <label for="cbox">Click me</label>
  <input type="checkbox" id="cbox">
</div>

</body>
Eniss
  • 975
  • 2
  • 20
  • 40

2 Answers2

0

Instead of using it in js.

Use the input attribute from bootstrap

Ref: html-inside-twitter-bootstrap-popover

sanjeev shetty
  • 438
  • 4
  • 17
0

There is two bug in your code.

  1. "some name" should be in the first "td", but you put it in "tr".

  2. you should "t.parentNode.remove();" rather than only remove a "td".

document.addEventListener("click", function(x) {
  if (x.target && x.target.id === "cbox") {
    if (x.target.checked === true) {
      var t = document.getElementById("servicesEx-popTable_content");
      t.innerHTML += "<tr><td id='popover-1'>some name</td><td>1</td><td>$50</td></tr>";
    } else {
      var t = document.getElementById("popover-1");
      t.parentNode.remove();
    }
  }
});

$(function() {
  $('[data-toggle="popoverEx"]').popover({
    container: 'body',
    placement: 'bottom',
    html: true,
    viewport: 'body',
    content: function() {
      return "<table class='table services-popTable'><thead><tr><th>Name</th><th>Quantity</th><th>Price</th></tr></thead><tbody id='servicesEx-popTable_content'></tbody></table>";
    }
  });
});
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>

<div>
  <span style="cursor: pointer;" data-toggle="popoverEx" data-content="">Click to see popover</span> &nbsp;
  <label for="cbox">Click me</label>
  <input type="checkbox" id="cbox">
</div>

</body>