I do not understand why my javascript files are not being applied on my templates. Here is my base.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'assets/css/main.css' %}">
</head>
<body>
<div>
{% include "navbar.html" %}
{% block content %}
{% endblock content %}
</div>
{% include "scripts.html" %}
</body>
</html>
Here is my scripts.html:
{% load static %}
<script src="{% static 'js/main.js' %}"></script>
<script src="{% static 'assets/js/jquery.min.js' %}"></script>
<script src="{% static 'assets/js/jquery.dropotron.min.js' %}"></script>
<script src="{% static 'assets/js/browser.min.js' %}"></script>
<script src="{% static 'assets/js/breakpoints.min.js' %}"></script>
<script src="{% static 'assets/js/util.js' %}"></script>
<script src="{% static 'assets/js/main.js' %}"></script>
However, they don't seem to affect the template. For example, the dropdown menu is in a weird format if I run the server. Another weird thing happening is that Main.js keeps being printed on the console. I believe this was initially because of the main.js file which had:
console.log("Main.js");
However, even though I change it to the following:
console.log("Something new for the console");
I still get Main.js printed out on the console. Moreover, if I put console.log("something") for my other javascript files referenced above, they don't get printed out on the console. I have no idea why this is happneing. Thanks, and please ask any questions.
Juan Pablo Isaza
Clean up cached images and files!
If you are using Chrome, you can follow the following steps: