I am trying to append a div when a checkbox is selected in dajngo template but i keep receiving Uncaught ReferenceError: $ is not defined in the console
the template:
{% extends 'base_layout.html'%}
{%load static%}
{% block content %}
<div class="inventory-content">
<div class='category'>
<div>Categories</div>
<div class='category-checkbox'>
{%for category in categories%}
<input type="checkbox" id="{{category.id}}" name="{{category.name}}" value="{{category.id}}">
<label for="{{category.name}}"> {{category.name}}</label><br>
{%endfor%}
</div>
</div>
<div class='items'></div>
</div>
<script>
$('.category-checkbox input[type="checkbox"]').click(function (){
if ($(this).is(':checked')) {
// Add the element to the div with an id identifier
$('.items').append('<div id="[{{category.id}}]">123</div>');
} else {
// Remove the element from the div targeted by the id identifier
$('.items #[{{category.id}}]').remove();
}
});
</script>
{% endblock %}
jquery in django is aliased to django.jQuery instead of $. If you want to use $ instead, you can do something like this:
(function($) {
//do some stuff with $ here
})(django.jQuery);