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>
Related
I code with django and when I am working with django template, I do the below to avoid repeating code. Let me illustrate it with an example:
Suppose I have two pages in my website:
1) home
2) about
In django I code as below:
I first build a base.html :
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}home{% endblock title %}</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/my-base-css.css' %}">
{% block stylesheet %}{% endblock stylesheet %}
</head>
<body>
<h1>this is my site</h1>
{% block body %}{% endblock body %}
</body>
</html>
I then build home.html:
{% extends 'base.html' %}
{% block stylesheet %}<link rel="stylesheet" href="{% static 'css/home-page-css.css' %}">
{% endblock stylesheet %}
{% block body %}
<h2>This is home</h2>
{% endblock body %}
I also build about.html:
{% extends 'base.html' %}
{% block title %}
my-website-about
{% endblock title %}
{% block stylesheet %}<link rel="stylesheet" href="{% static 'css/about-page-css.css' %}">
{% endblock stylesheet %}
{% block body %}
<h2>This is about</h2>
{% endblock body %}
I now want to do the same without having a backend. I have a static website. How can I do the same without having a backend like django or php, etc.?
There is a similar question in here:
Include another HTML file in a HTML file
This can solve my problem. However, it is a little different from what I want. It is loading another html in an html file but I am looking for extending another html; I mean adding to another base.html and having a new html file
It looks like you're using the Django Templating Language which is similar to Jinja (I've only used this one because I've mostly used Flask but the way it works should be similar). Django uses this language in its template engine and the way it works is by basically taking your HTML file, passing it through a backend (Django), and replacing the variables/logic you have there with actual values. In the end, you'll have a fully built HTML file.
The short answer is no.
From my understanding of template engines, you need to have a backend that can actually work out which values (by replacing this syntax { some_variable }) you should put in the final HTML output.
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 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' %}">
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 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 %}