How do I make Javascript inside Django code listen & respond to on click events on the front end?

Question

I have a page which has a list of products. For each product, I have a button (Add to Cart).

Once a user clicks on this button the product gets added on a side panel (aka cart). This side panel has:

Quantities to be changed
Delete icon - in case user wants to remove the product from the cart. So, these delete icons are created run time every time a user adds the product to the cart.

Now, I have an event listener in my JS which would listen to click on the delete icon and then remove the product. But, any clicks on the delete icons are not getting responded.

Funny thing is if I take the same JS code and use it in Chrome console it works. Any idea why this is not working ?

There is [django_channels](https://channels.readthedocs.io/en/latest/) to work with the things you are asking. There are lots of tutorials and article. — Biplove Lamichhane, Sep 07 '20 at 11:25

score 0 · Answer 1 · answered Sep 07 '20 at 14:09

From what I understand you have to make a folder called static at the root directory of your app this is where you keep your JavaScript/CSS files. Then you have to let Django know where your static files are in your settings.py file. By adding the code showed below. I have also included how to render in the static files in your HTML file hope this helps.

settings.py:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

STATIC_URL = '/static/'

HTML file:

<!DOCTYPE html>
<head>
  {% load static %}
  <script src="{% static 'app.js' %}"></script>   
  <title>Site</title>
</head>
<body>
<img src="{% static 'img.png' %}" alt="Mon image" />
  {% block content %}{% endblock %}
</body>
</html>

You could change app.js and img.png depending on how you want to name your files.

There is a similar thread here: django how to include javascript in template

How do I make Javascript inside Django code listen & respond to on click events on the front end?

1 Answers1