Reputation: 13
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
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
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