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 %}
Advertisement
Answer
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);