Develop Reference

Flask - Different Javascript file for each template

I'm working on an application built with flask and using templates. I have a layout.html file with head tags and js/css links which I'm importing on each page using:
{% extends "layout.html" %}
{% block content %}
{# My content #}
{% endblock content %}
This works but I now need to link to other JS files only for specific html files and wondering what is the correct way of doing it using flask.

You can simply include your <script> tags in the HTML file where you need them. This way, the javascript will be imported only when that specific page is loaded.
An example is:
{% extends "layout.html" %}
{% block content %}
{# My content #}
{% endblock content %}
{% block scripts %}
<script scr="..."></script>
{% endblock scripts %}

If I am not wrong, you want some of your HTML pages to have a link to JavaScript code.
To achieve this just add the <script> tag in that particular HTML page as follows:
<script src="{{ url_for('static', filename='JS/some_file.js') }}"></script>
where-
JavaScript file is kept at: static->JS->some_file.js

{% block javascript %}
<script type="text/javascript">
{% include "some-js-file.js" %}
</script>
{% endblock %}
Create a code block like the block above.
For completeness, you can also reference this SO question: Loading external script with jinja2 template directive

You can have all the unique Javascript tags in the layout.html file then for each endpoint use if else statements to render the tag you want for each page. The endpoint is simply the name of the view function.
{% if request.endpoint == 'index' %}
<script src="{{ url_for('static', filename='JS/file.js') }}"></script>
{% elif request.endpoint == 'another-endpoint' %}
<script src="{{ url_for('static', filename='JS/some_other_file.js') }}"></script>

Including assets conditionally in twig

In my twig template I include javascript files like this:
{% block javascripts %}
{{ parent() }}
{% javascripts
"#SomeBundle/Resources/public/js/eventendpage.js"
"#SomeBundle/Resources/public/js/eventList.js"
"#SomeBundle/Resources/public/js/containerList/container-list.js"
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock javascripts %}
This template is used for several custom contents, and I want to conditionally include other JS files, for example, if the template variable type equals "form", I want to include one more file like "#SomeBundle/Resources/public/js/Form/form-validation.js" beside the other ones.
How can I do this if there is any other way?

Why are my javascript files not being found in assetic?

I am using Twig as my template, utilizing a layout, in which I have a javascript block
...
{% block javascripts %}
{% javascripts
'#jquery'
'#bootstrap_js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
</body>
In a content template, I have
{% block javascripts %}
{{ parent() }}
{% javascripts '#AppBundle/Resources/public/index/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
This is my assetic section of the config.yml
assetic:
debug: true
use_controller: false
filters:
cssrewrite: ~
assets:
bootstrap_js:
inputs:
- %kernel.root_dir%/../vendor/twbs/bootstrap/dist/js/bootstrap.min.js
bootstrap_css:
inputs:
- %kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap.css
- %kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap-theme.css
filters:
[cssrewrite]
bootstrap_glyphicons_ttf:
inputs:
- %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
output:
"../fonts/glyphicons-halflings-regular.ttf"
bootstrap_glyphicons_eot:
inputs:
- %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
output:
"../fonts/glyphicons-halflings-regular.eot"
bootstrap_glyphicons_svg:
inputs:
- %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
output:
"../fonts/glyphicons-halflings-regular.svg"
bootstrap_glyphicons_woff:
inputs:
- %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.woff
output:
"../fonts/glyphicons-halflings-regular.woff"
jquery:
inputs:
- %kernel.root_dir%/../vendor/components/jquery/jquery.min.js
Everything else works fine, except for the files under #AppBundle/Resources/public/index/*. I run assetic:dump for my environment, everything goes smoothly, but I keep getting a 404 HTML dump underneath the script element for #AppBundle/Resources/public/index/*
<script src="/logbook/web/js/431d650.js">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>An Error Occurred: Not Found</title>
</head>
<body>
<h1>Oops! An Error Occurred</h1>
<h2>The server returned a "404 Not Found".</h2>
<div>
Something is broken. Please let us know what you were doing when this error occurred.
We will fix it as soon as possible. Sorry for any inconvenience caused.
</div>
</body>
</html>
</script>
Something is broken, apparently, but I cannot figure out what???

I did also have some issues using assetic in the past and I wrote down a way how I got it work. Maybe it would help you if you'd try to execute the following command first before dumping the assetic stuff:
php app/console assets:install --symlink web

django-smart-selects doesn't work in templates

I have a problem with django-smart-selects usage.
In the admin panel, django-smart-selects works correctlyn but in templates there is an error.
Uncaught ReferenceError: chainedfk is not defined
$(document).ready(function() {
chainedfk.init(chainfield, url, id, value, empty_label, auto_choose);
});
Mt urls:
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^chaining/', include('smart_selects.urls')),
url(r'^$', 'avtocry.views.index'),
url(r'^/', include('advdesk.urls')),
url(r'^createadv/', 'advdesk.views.createadv',name='createadv')
]
tamplate file
{% extends 'base.html' %}
{% block content %}
<div class="wrapper">
<form action='{% url 'createadv' %}' method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="OK">
</form>
</div>
{% endblock %}
base file contais
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
html output
template
admin

Here's how I solved this, for some reason unknown to me, a file called chainedfk.js is missing. After a little digging I found that this file exists in this path 'smart-selects/admin/js/chainedfk.js' in the library files.
So I simply added this import line my base.html file.
*I removed the tags so it can be visible.
script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"
after the js import line and it worked like a charm :)

UPDATE - MAY- 2017
Sorry, things have a bit changed as of now, my form also refused to load and yet it was loading some time back, so you have to include the tag below, right after the jquery and the tag that contains chainedfk.js
This works very well both for django 1.10.5 and Django 1.11 -(the latest version as of this writting) - Python 3.5.2
<script type="text/javascript" src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
<script type="text/javascript" src="{% static 'smart-selects/admin/js/chainedm2m.js' %}"></script>
<script type="text/javascript" src="{% static 'smart-selects/admin/js/bindfields.js' %}"></script>

I had the same problem but without receiving any error.
it worked for me too when I included:
<script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>

to be 100% correct you have to import file with this specific order:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js </script>
<!-- Smart select -->
<script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
<script src="{% static 'smart-selects/admin/js/chainedm2m.js' %}"></script>

Worked for me by putting {{form.media.js}} which loads the required javascripts in the head.
so:
{% block headjavascript %}{{ form.media.js }}{% endblock %}
Which is a better practice for loading javascript

Why is part_1.js, part_2.js showing up in my assetic compiled code

When i compile my code using assetic my js files are being named part_1.js, part_2.js. i dont see this referent to part_ anywhere in my code. where is this coming from?
config.yml
assetic:
assets:
our_custom_js:
inputs:
- '#MyBundle/Resources/public/js/base.js'
filters: []
output: 'custom.js'
fos_js_routes:
inputs:
- 'bundles/fosjsrouting/js/router.js'
output: 'fos_js_router.js'`
base.html.twig
{% javascripts combine=false output="sandbox.js"
'#our_custom_js'
'#fos_js_routes'
%}
<script src="{{ asset_url }}"></script>
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
{% endjavascripts %}
my source ends up looking like this
<script src="/sandbox_part_1.js"></script>
<script src="/js/routing?callback=fos.Router.setData"></script>
<script src="/sandbox_part_2.js"></script>
<script src="/js/routing?callback=fos.Router.setData"></script>
This question was also asked here How to make Symfony 2 asset compilation to product different filenames?

Just answered the same question here. The 'part_#' string is added when accessing your application in the development environment (app_dev.php).
By default, {% javascripts %} will print all your assets/scripts, using a <script> line for each script. In the production environment, they are combined.
The {% javascripts %} function acts like a foreach loop in dev environment, while it will combine all assets in to a single <script> line in production. If you take a look at the PHP-script in the documentation, you can see that it's using foreach:
<?php foreach ($view['assetic']->javascripts(
array(
'#AppBundle/Resources/public/js/*',
'#AcmeBarBundle/Resources/public/js/form.js',
'#AcmeBarBundle/Resources/public/js/calendar.js',
)
) as $url): ?>
<script src="<?php echo $view->escape($url) ?>"></script>
<?php endforeach ?>
Your base.html.twig should look like this:
{% javascripts combine=false output="sandbox.js"
'#our_custom_js'
'#fos_js_routes'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
When the other <script> is not inside the javascripts part, it will not be in the loop, so it will be printed only once.