Menu
I receive the error: "Uncaught ReferenceError: $ is not defined".
Below is the component/templates/component/update.html template which is defined as:
{% extends 'base.html' %}
{% block content %}
{% load static %}
<script src="{% static 'component/js/component.js' %}"></script>
<h2>Create new component</h2>
{% include 'snippets/form-snippet.html' with form=form %}
{% endblock %}
I have the script saved at component/static/component/js/component.js. The file is found since in the console.log i can read: "GIVE ME SOME LOG". However I receive the error: "Uncaught ReferenceError: $ is not defined". Apperently jQuery is not found but how to fix this? The component.js file is defined as follows:
console.log("GIVE ME SOME LOG")
$(document).ready(function(){
hideShow()
})
$('#id_component_type').click(function(){
hideShow()
});
function hideShow(){
if(document.getElementById('id_component_type').options[document.getElementById('id_component_type').selectedIndex].value == "k_v")
{
$('#id_length').parents('p:first').hide();
$('#id_k_v').parents('p:first').show();
}else
{
$('#id_length').parents('p:first').show();
$('#id_k_v').parents('p:first').hide();
}
}
The base.html file is defined as:
<!DOCTYPE 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">
<title>{% block head_title %}Solarus Calculation Tool{% endblock head_title %}</title>
{% include 'snippets/css.html' %}
</head>
<body>
{% include 'snippets/nav.html' %}
<div class='container'>
{% block content %}
{% endblock content %}
</div>
{% include 'base/js.html' %}
<script>
$(document).ready(function(){
{% block jquery %}{% endblock %}
})
</script>
</body>
</html>
The js.html is defined as:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
235
asked Aug 01 '26 16:08
You should consider adding this script <script src="{% static 'component/js/component.js' %}"></script> inside the {% block jquery %}{% endblock jquery %}
That way, Django will load it after the jQuery file
Instead of this
<script>
$(document).ready(function(){
{% block jquery %}{% endblock %}
})
</script>
Create the block that way to avoid double script tags
<script> --> remove this script
$(document).ready(function(){
})l;
</script>
{% block jquery %}{% endblock %}
so when you call that block, you can open the script tag
{% block jquery %}<script>< /script> {% endblock %}
or even call something from other websites
{% block jquery %}
<script src="https://cdn.something.com"></script>
<script src="{% static 'component/js/component.js' %}"></script>
{% endblock %}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
