smarky7cd
smarky7cd

Reputation: 13

Elements not appearing after emptying div and appending

I have a jquery function that on a click event empties a div, gets some json, and then appends to that cleared div. However, the check boxes I am trying to append to said div are not appearing. Here is my code:

$(function() {
  $("#nwCol").click(function() {
    $('#adDiv').empty();
    $.getJSON('/_adv_detect_su', function(data) {
      $(data.advanced).each(function(index, value) {
        if (value.present === 'yes') {
          $('#adDiv').append("<input name='aoCB' type='checkbox' checked='checked'>" + value.name + "</input>");
        } else {
          $('#adDiv').append("<input name='aoCB' type='checkbox'>" + value.name + "</input>");
        }
      });
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-7 text-center">
  <form id="advDet">
    <div id="adDiv"></div>
    <div id="saveao"> <button id="svAoBtn" type="button" class="btn btn-primary center-block">Save</button> </div>
  </form>
</div>

I have this working when not clearing the div, and using the .after function. However, this is not ideal.

Upvotes: 1

Views: 72

Answers (2)

Ramon Marques
Ramon Marques

Reputation: 3264

If you are using any AD BLOCK Your div ID, starting with 'ad' will get #header_ads style from user agent browser, that set "display: none", so it appears to not work, even if it is working. As you can see here on this print screen http://storage1.static.itmages.com/i/17/0616/h_1497628218_1896684_0db84ac526.png

So I changed your div id to anotherID now it's working

Run the snippet below.

$(function() {
    $("#nwCol").click(function() {
      var anotherDiv = $('#anotherID');
      anotherDiv.empty();
      var data = {
        advanced: [{present: 'yes', name: 'test1'}, {present: 'no', name: 'test2'}]
      };
      $(data.advanced).each(function(index, value) {
        console.log(value);
        if (value.present === 'yes') {
          anotherDiv.append("<input name='aoCB' type='checkbox' checked='checked'>" + value.name + "</input>");
        } else {
          anotherDiv.append("<input name='aoCB' type='checkbox'>" + value.name + "</input>");
        }
      });
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 text-center">
  <form id="advDet">
    <div id="anotherID"></div>
    <div id="saveao"> 
      <button id="svAoBtn" type="button" class="btn btn-primary center-block">Save</button> 
    </div>
  </form>
  
  <a href="javascript:;" id="nwCol">Test Click</a>
</div>

Upvotes: 2

Woodrow
Woodrow

Reputation: 2832

Please see the snippet (looks like your button id selector was incorrect):

$(function() {
  $("#svAoBtn").click(function() {
    $('#adDiv').empty();
    $.getJSON('https://api.myjson.com/bins/16qosb', function(data) {
      $(data.advanced).each(function(index, value) {
        var checkedInput = "";
        if (value.present === 'yes') {
          checkedInput = "checked='checked'";
        }
        $('#adDiv').append("<input name='aoCB' type='checkbox'" + checkedInput + ">" + value.name + "</input>");
      });
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 text-center">
  <form id="advDet">
    <div id="adDiv"></div>
    <div id="saveao"> <button id="svAoBtn" type="button" class="btn btn-primary center-block">Save</button> </div>
  </form>
</div>

Upvotes: 0

Related Questions