I'm trying to find out how to run JavaScript in Django to create chained forms. But at the first I want to find out how to even run JavaScript. I've created a simple main.js file which is in static forder.
I've added a path to main.js into the head of html. And the script have to run when the page is loaded (just to be sure that I can step forward).
I've put alert on the beginning of the function so I can see whether the js has been run. But I can't see no alert nor js in chrome inspect.
Could you guys tell me where is the problem?
main.js
$(document).ready(function(){
alert("OK")
$.ajax({
url: "get-possible-levels/",
type: "POST",
data: {language: $('#id_language').val()},
})
})
template:
{% extends 'base.html' %}
{% load static %}
{% block head %}
<script src="{% static "js/main.js" %}"></script>
{% endblock %}
{% block content %}
{% if user.is_authenticated %}
<form action="" method="post" enctype="multipart/form-data">{% csrf_token %}
{{ language_form }}
<button value="Update" type="submit">Submit</button>
</form>
{% endif %}
{% endblock %}
View:
#login_required
def create_order(request):
language_form = LanguageLevelForm(request.POST or None)
return render(request,'auth/jobs/create-job-test.html',context={'language_form':language_form})
EDIT: The main.js seems to be executed but it does not alert anything. I've checked inspect (and I've tried to put semicolon after alert('ok')) :
Your {% load static %} should be {% load staticfiles %}. After that try refreshing the page the way I described in my comment. BTW Are you actually including JQuery? Your question is about JavaScript. You should try to use a vanilla JavaScript alert before adding JQuery code just to troubleshoot it. If you can get that working try adding this to your <head>
<script src="jquery-1.12.0.min.js"></script>
Check if you have the path to the js file wrong.if your project folder has 2 folders inside (one with html files and 1 with Js files) then on your path with the ../ you go up one level on your folder and then go inside your javascript folder to find the file. So instead of
<script src="{% static "js/main.js" %}"></script>
write
<script src="../js/main.js"></script>
Related
I want to add custom JavaScript everytime as per the logic in my backend.
For example:
--views.py--
...
js="JavaScript which i want to add"
js_={'js_script':js}
return render(request,'html.html',context=js_)
--html.html--
....
<script>
{{js_script}}
</script>
But this does not properly work and a weird " is added in various places in the html source code everytime and the work is not accomplished. Please Help if you have a work around.
Just tried something and it worked.
source: django docs - safe templatetag
in context you are doing it right example:
context = {
'js_var': 'console.log("JavaScript which i want to add")',
}
in template add template tag "safe" it will remove the """ 's:
<script>
console.log('sanity check');
{{js_var|safe}}
</script>
output:
sanity check
JavaScript which i want to add
Have a good day!
Tell me if this worked for you!
i think you want to load custom javascript code locally for particular page, to do that the proper way without mixing things, you need to define {% block %} in your base.html template and via DTL inheritance mechanism you can load you javascript the right way in right order without any conflict
in base.html define, let say {% block javascripts_local %}{% endblock %} like
{% load static %}
<!doctype html>
<html class="no-js" lang="{% block lang %}en{% endblock %}">
<head>
[..]
</head>
<body{% block body_attributes %}{% endblock %}>
[..]
{% block javascripts %}
<!-- i'm using HTML5 Boiler Plate template -->
<script src="{% static 'js/vendor/modernizr-3.7.1.min.js' %}"></script>
<script src="{% static 'js/plugins.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
<!-- override this block in child template -->
{% block javascripts_local %}{% endblock %}
{% endblock %}
</body>
</html>
and then in your child template override the block
{% extends 'base.html' %}
{% load static %}
[..]
{% block javascripts_local %}
<script>
// Your javascript code goes here
</script>
{% endblock %}
I'm using CKEditor in my flask app to give users WYSIWYG in my text fields, and I'm loading the script in the base.html jinja template.
However, I get console errors in the templates where I don't have a text field:
[CKEDITOR] Error code: editor-incorrect-element.
Object { element: "description" }
Is there a workaround for this?
Thank you!!
I solved this by adding an empty block in my base.html instead of the script:
{% block CKEditor_js %}
{% endblock CKEditor_js %}
Then I added the script in a block at the bottom of the pages I need the script:
{% block CKEditor_js %}
<script src="{{ url_for('static', filename='js/cke.js') }}"></script>
{% endblock CKEditor_js %}
And finally a very small JS file, in this case cke.js, with just:
CKEDITOR.replace("description");
I have a base_generic.html page in django that has the standard UI elements (navbar, footer, etc.), and I have a list.html page which extends the base_generic.html page. The list.html page is using a javascript function that is only used in this page, but for it to work, I have to include it in the base_generic.html page.
How can I include this javascript function in list.html using Django's built-in template tags and features?
Should I use {% verbatim %} or {% scripts %} or another tag template?
Should I include this inline with the {% block content %} that has the html for this django template, or should I place it before or after the {% block content %}?
You have several ways of accomplish what you want:
Just add the javascript snippet inside the {% block content %}
{% block content %}
my javascript();
{% endblock content %}
Use the include statement to a file with your javascript, again, inside the {% block content %}
{% include 'my_javascript.html' %}
In this way, you can reuse your javascript code on other pages.
Create a new block in base_generic.html, like:
{% block my_javascript %}{% endblock my_javascript %}
And in you child template, add the javascript as told in the first points iside these tags, in this case it can be outside or inside the {% block content %}.
An alternative would be pass the path for the js file in your views.py:
context = {
'scripts_to_include':['/static/js/my_js_file.js']
}
You can obviously include multiple js files here. Then, in your template:
{% if scripts_to_include %}
{% for script_url in scripts_to_include %}
<script src="{{script_url}}"></script>
{% endfor %}
{% endif %}
I like this, cause the js files can still be stored in a directory (instead of putting it right into html), JS files are also reusable.
I have a question about, how to separate a loading specify javascript file of specify template twig file.
I got for example admin.html.twig which extends base.html.twig, in base i got
{% block javascripts %}
<script src="/assets/js/core/jquery.min.js"></script>
<script src="/assets/js/core/popper.min.js"></script>
<script src="/assets/js/core/bootstrap-material-design.min.js"></script>
<script src="/assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<script async defer src="https://buttons.github.io/buttons.j"></script>
<script src="/assets/js/plugins/chartist.min.js"></script>
<script src="/assets/js/plugins/bootstrap-notify.js"></script>
<script src="/assets/js/material-dashboard.min.js"></script>
<script src="/assets/demo/jquery.sharrre.js"></script>
<script src="/assets/js/sparkline.js"></script>
<script src="/assets/js/plugins/chartjs.min.js"></script>
{% endblock %}
and I got next file like dashboard.html.twig which extends a admin.html.twig file, and my question is that in dashboard.html.twig file i got at the a little writed-self small javascript code, and this javascript of course use a jquery library but this library i loaded in base.html.twig file a next of my selfwrited script which is in dashboard.html.twig.
My question is, how i can for example load my small code of javascript (of course i can save it in separated file like mycode.js) but how to load only when this route of dashboard.html.twig file i used and after jquery is loaded ? becouse in another routers i dont need this mycode.js so I dont wanna put it to base.html.twig file in javascript block, any idea ?
If dashboard directly extends admin then u can do the following to ensure to load all the admin scripts and to add the dashboard specific script:
{% extends "admin.html.twig" %}
{% block javascripts %}
{{ parent() }} {# execute the parent block, thus loading all scripts in admin #}
<script src="/assets/js/dashboard/mycode.js"></script>
{% endblock %}
You can dived
{% extends "admin.html.twig" %} {# use only in case your all templates are at the same places like app/Resources/views/admin.html.twig #}
{% block javascripts %}
{{ parent() }} {# loads the parent javascript block, from the template you are extending in first line. #}
<script src="/assets/js/dashboard/code.js"></script>
{% endblock %}
in case you are trying to extend a template from another bundle then you can use this
{% extends "YourBundleName:Default:admin.html.twig" %} {# YourControllerRelativeName just in case your view structure is like views/Default/admin.html.twig#}
{% block javascripts %}
{{ parent() }} {# loads the parent javascript block, from the template you are extending in first line. #}
<script src="/assets/js/dashboard/code.js"></script>
{% endblock %}
to the better understanding you should read a little here:
https://symfony.com/doc/2.8/templating.html
Note:- in the documents you should change version as per your current version.
I would suggest the following solution.
Declare the following block in base.html.twig after {% block javascripts %}{% endblock %}
{% block javascript_page %}{# specific code for current page #}{% endblock %}
Then in your page you can include page specific scripts
{% extends "admin.html.twig" %} or {% extends "base.html.twig" %}
{% block javascript_page %}
<script src="/assets/js/pages/my_page.js"></script>
{% endblock %}
Although answer by DarkBee is also correct but in this way you don't have to worry about calling {{ parent() }} in each page.
I've in Django 1.11 a base.html which contains all the scripts references.
Then, I've another page.html that extendes base.html with {% extends base.html %} and {% block content %} / {% endblock content %} tags.
Well. In base.html I've a reference to Chartjs.js plugin. In page.html, if I try to call to Chart() function or just $ jquery, I get "function is not defined". If I open console debugger and try to call $ or just Chart(), it works. So I think that there's a problem with loading time. The page.html is rendered before the js are downloaded or requested!
How can I solve it? I've done it before, I don't know what could be the problem.
Thanks!
Without your code showing, hard to tell. Based on what you wrote, perhaps you forgot to put a block and block.super to get the parent (base.html's) Chartjs reference.
This should be in your page.html at the bottom after your {% endblock content %} tag. See example below (using DataTables as example since your code is not shown):
</div>
{% endblock content %}
{% block javascript %}
{{ block.super }}
<script type="application/javascript">
$(document).ready(function () {
$('#table').DataTable({
responsive: true,
});
});
</script>
{% endblock javascript %}
Base.html would have the js section enclosed in
{% block javascript %} …. {% endblock javascript %}