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' %}">
Related
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.
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>
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?
I'm using Mozilla Nunjucks templating system for a static website which has multiple pages. For some purpose, I want to add a class to body tag for each different page
About us page > <body class="about">
Home > <body class="home">
I can do this very easily if body tag I keep inside every page but I want to keep body tag inside my template which I would be using for all pages.
I want to change classes conditionally.
Set variable on your page. On your page.njk:
{% set bodyClass = "pageClass" %}
Call bodyClass on layout. <body{% if bodyClass %} class="{{ bodyClass }}"{% endif %}>
It's not fully dynamic, but you can set variables inside your page templates and use those in a conditional to set the body class.
layout.nunjucks
{% if pgHome %}
<body class="home">
{% elif pgAbout %}
<body class="about">
{% else %}
<body class="page">
{% endif %}
home.nunjucks
{% extends "layout.nunjucks" %}
{% set pgHome = true %}
Homepage Markup
...
Try this:
Layout:
<body class="{%block bodyClass %}{% endblock %}">
Page:
{% block bodyClass %} about {% endblock %}
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 %}