Develop Reference

Call a function from an external JavaScript file in href with Symfony and Twig

I'm trying to call a function from an external JavaScript file in href with Symfony and Twig.
Here is my JavaScript file pm.js :
function test(id) {
alert(id);
}
And here is my template :
{# templates/pm/pm.html.twig #}
{% extends 'base.html.twig' %}
{% block title %}{{ parent() }} | Private messaging{% endblock %}
{% block body %}
(...)
test
(...)
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('build/js/pm.js') }}"></script>
{% endblock %}
How can I do that? Thanks for help.

That happens because you are using a compiled pm.js javascript file (that's why it lives in build/js I guess). If you just have placed pm.js in your public js folder without compiling it your code will be good to work as it is.
Your problem is that your function after the compilation is not a global function. You could overcome this with several ways, the most simple of them being:
window.test = function test(id) {
alert(id);
}
Just assign your function test() to a window variable window.test and it will work.

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>

load static file in a template that extends other template - Django javascript

I want to load a javascript file in the template that extends my base_generic template. I am using generic listView to render the template.
Since I can not use "{% url %}" tamplate tag inside of "{% block %}" tag I hardcoded the link as follows:
<script src="static/js/search.js">
Unfortunately the file does not work and I get a a message that: "SyntaxError: expected expression, got '<' "
I guess it is because my view tries to render the template as html (am I right?) - my assumption is based on this post: SyntaxError: expected expression, got '<'
So my question is: how can I load a static file in the template that extends another template.
EDIT:
Here is my template:
{% extends "base_generic.html" %}
{% block content %}
{% if search_flag %}
SEARCHFLAG ON
{% else %}
<h2 class="myh"> Książki: </h2>
{% if book_list %}
<script>
var lista=[];
{% for book in book_list %}
var title="{{book.title}}";
var authors=[];
{% for author in book.author.all %};
var aut="{{author.last_name}}";
authors.push(aut);
{% endfor %}
var authorsStr=authors.join('; ');
var book=[title, authorsStr]
lista.push(book);
{% endfor %}
console.log("created list of books and authors - name: lista")
</script>
{% else %}
<p>W katalogu nie ma książek</p>
{% endif %}
{% endif %}
<script src="static/js/search.js">
</script>
{% endblock %}

You don't use {% url %} tag to get path to you static file, just write this on the top of your template file:
{% load staticfiles %}
After that, you can get access to your static files by folowing constructions:
<script src="{% static 'js/search.js' %}">
Read more in documentation.
If you want to extend the base template, you have to add block script and extend it to your templates
base.html:
{% block scripts %}
{% endblock %}
index.html:
{% block script %}
<script src="{% static 'js/search.js' %}">
{% endblock %}
Hope this will help.

You can use {% url "" %} in a block. To use static make sure to include {% load static %} directly after the extends template tag when you need it. Then you can:
<script src="{% static 'js/search.js' %}">

Adding javascript to an extended django template for google analytics

I have a nice little index.html file, it is an extended template and its parent is a base.html file (well in my case base2.html). I was trying to add a google analytics code snippet to some files on my site and it turns out, if I add anything in the tag on my extended templates, it is like the script code is ignored. Is there something I am doing wrong? I know I can add it just fine to base2.html, but then that would track for ever single hit since that is the parent for a lot of my pages on the site.

Without seeing the base2.html and index.html, it's pretty tough to answer, but the most likely culprit is that you forgot to put the <script></script> inside of a {% block %} that exists in the parent template. Remember that for template inheritance in Django, the parent defines a "skeleton" of all the blocks, and children must override those blocks— you can use {{ block.super }} to inherit all of the parent template's content for that block, then add any additional content. Any content in the child template that is not in a block in the parent "skeleton" template that it's extending doesn't get rendered.
# base2.html
<body>
{% block content %}
{% endblock content %}
{% block footer_scripts %}
<script src="foobar"> ...</script>
{% endblock footer_scripts %}
</body>
If you were to just add this, it wouldn't work:
# index.html - DOES NOT WORK
{% extends 'base2.html' %}
<script>
// GA javascript
</script>
You need to include it in a block:
# index.html - DOES WORK
{% extends 'base2.html' %}
{% block footer_scripts %}
{{ block.super }}
<script>
// GA javascript
</script>
{% endblock %}

Phalcon routes in js files

I want to use phalcon's dynamic routing in the js files.
For example, I have angular js code in the js files and I need to populate a list of objects that I get from a controller action listAction (/users/list) or I need to push changes to an object that is a controller action saveAction (/user/save).
I do not like hardcoding the routes in the js files like
$http.get("http://localhost/sample/users/list").success(function(response){
//my code here
});
I would like to use phalcon's router in the js files like the following:
$http.get("{{ url('users/list')").success(function(response){
//my code here
});
Right now I'm separating the javascript from the controller action's view by creating a partial .volt file and putting all the javascript related to that view in there.
Is there a better way? Is there a way I can have access to the phalcon router in js files? I use FOSJsRoutingBundle in Symfony is there an alternative for phalcon?

this is an example.
put block in Your layout.volt:
<html>
<head>
{% include 'js.volt' %}
{% block js %}{% endblock %}
</head>
<body>
<script>
{% block include_js %}{% endblock %}
</script>
{% block content %}{% endblock %}
</body>
</html>
js.volt:
<script src="path/to/js/file.js"></script>
and in Your view (users/list.volt) do:
{% extends 'layout.volt' %}
{% block js %}
<script src="path/to/js/another/js/file.js"></script>
{% endblock %}
{% block include_js %}
$http.get("{{ url('users/list')").success(function(response){
//my code here
});
{% endblock %}
{% block content %}
BLABLABLA
{% endblock %}