I am using a master template which roughly looks like this
<!DOCTYPE html>
<html lang="en">
<head>
// load css files
</head>
<body>
{% block body %}{% endblock %}
// load js files including jquery
</body>
</html>
Now all other sites for my app look like this
{% extends "master.html" %}
{% block body %}
// site content
{% endblock %}
for each site I have some specific javascript code, which I put at the end of the body block. But this means that this javascript is loaded before jquery is loaded (which is done in the master template). Since some of the javascript in the body tag requires jquery (like e.g. the $(document).read() function) I get errors. The simple solution is to include jquery in each body tag separately... however, that starts to undermine the point of the master template... is there any better solution?
thanks
carl
EDIT: Sorry I forgot to say that my current solution is to load jquery before the body, however, google pagespeed complains about this so I was looking for a better solution
If you have scripts in {% block body %} of extended files that dependens on jQuery; if so , it is recommended to load jQuery on head ofmaster.html
<!DOCTYPE html>
<html lang="en">
<head>
// load css files
//load jQuery --------------!!!!!!
</head>
<body>
{% block body %}{% endblock %}
// load js files excluding jquery
</body>
</html>
Related
I'm trying to modify login page UI (with React) in JupyterLab, it seems like its server consists of Python Tornado and renders login.html as one of templates. (literally stored in templates directory. ...jupyter_server\templates\) It might also render others like 404.html, error.html respectively in terms of contexts.
I simply followed https://reactjs.org/docs/add-react-to-a-website.html like below so:
page.html
<head>
<meta charset="utf-8">
<title>{% block title %}Jupyter Server{% endblock %}</title>
:
:
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
{% block login %}
{% endblock login %}
</body>
</html>
logint.html
{% extends "page.html" %}
{% block login %}
<script src="like_button.js"></script>
<script>console.log('This is Login page.')</srcipt> // logs shows fine
<h1>This is Login Page.</h1> // tag shows fine
{% endblock login %}
As I understand so far, when the url hit as login, login.html renders with appending its contents to page.html.
I was expecting the like_button.js component renders fine but it is the only thing excluded. The log and h1 are visible correctly meanwhile.
Have I missed something? any ideas welcome.
The src of the script isn't correct. In Tornado, you put your static files in a folder called static and then set the src like this:
<script src="{{ static_url('like_button.js')"></script>
If you put the file in a subfolder such as static/js/, then provide its relative path:
<script src="{{ static('js/like_button.js') }}"></script>
I'm having issues calling functions from twig views in Symfony 4.4. This view is called UserList.html.view and it extends base.html.twig
The beginning of the file is as following :
{% extends 'base.html.twig' %}
{% block body %}
{% block javascripts %}
<script src="{{ asset('build/js/custom.js') }}"></script>
...
I also tried with Encore by adding an entry but it's not working. The only way to access external functions is to call them from the parent view which is not what I want obviously.
The error I get :
Uncaught ReferenceError: coucou is not defined
at HTMLButtonElement.onclick (VM3883 manageAccounts:183)
onclick # VM3883 manageAccounts:183
I read some other posts about this but none of them actually provided a working solution.
Thank you for your help !
Hello there and welcome to SO forums. It is hard to put a finger on your issue based on the provided pieces of code - but the twig block usage might be something that is not implemented / working as you assume. Namely the javascript block inside the implemented body block has no relevancy to the a similarly named block in base template (I assume that there is similarly named block there) because it is placed inside the body block which you are completely overwriting in this UserList.html.twig template.
A basic working twig structure would be something like this:
base.html.twig
<html>
<head>
...
</head>
<body>
...
{% block body %}
...
{% endblock %}
...
{% block javascripts %}
...
{% endblock %}
...
</body>
</html>
UserList.html.twig - please note the parent() call that makes sure that the block contents from the inherited template are included as well (i.e. if you have some generic jquery or some other generic js includes defined there) - without the parent() you will be defining the javascripts block contents completely again in this template.
{% extends 'base.html.twig' %}
{% block body %}
...
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('build/js/custom.js') }}"></script>
{% endblock %}
I hope everyone is doing great during this troubles times ! France started containment last week so I had plenty of time finding the solution.
Dumbest thing ever but I didn't know that..
In your js external files, you have to declare your functions like this :
window.myfunction = function myfonction(){}
That's all..
Could that potentialy cause security issues ? I don't know so I'm asking xD
What is the best way to pass a variable from a Flask template into the Javascript file? Here is my code
I have a simple view in my webapp:
#webapp.route('/bars')
def plot_d3_bars():
return render_template("bars.html", calendarMap = calendarMap)
I have a templated HTML file that looks like this:
{% extends "base.html" %}
{% block title %} Bar View {% endblock %}
{% block content %}
{% with calendarMap=calendarMap %}
{% include "buttons.html" %}
{% endwith %}
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/static/css/d3.tip.v0.6.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Custom codes for d3 plotting -->
<link href="/static/css/bars.css" rel="stylesheet">
<script> var calendarMap = {{ calendarMap|tojson }}; </script>
<script src="/static/bars.js"></script>
{% endblock %}
Previous answers told me that I could just jsonify the variable into a JSON object and I'll be able to use it. However, I want to use calendarMap inside of bars.js? but I am running into some scoping problems (i.e. bars.js doesn't recognized this calendarMap), what should I do instead?
Well, maybe it is too late, but here we go.
When you use a JavaScript code embedded in HTML code, this script will be rendered together with HTML. So any variable referenced in JavaScript, as a Flask variable, will be available in the page rendered.
When you use an external JavaScript file linked in HTML code, its code already exists, before the HTML be rendered. In some cases, I may say most of them, you aren't the owner of this file. So any variable referenced in JS file will not be rendered.
You may put this variable in HTML, via JS code, and consume this data with functions from foreign JS file.
Or you can render this JS file, before render the template, and use it. But I strongly recomend not to use this approach.
Is there a good, performant and/or recommended way to declare and provide JS dependencies for blocks in Django templates?
Basically what I want to do is this:
In a Django template file containing a block, declare: I need JS library X to function.
In the tag of the page, upon rendering the page, insert a script tag for this library, but never more than once.
The reasons:
Minimize number of unnecessary JS libraries included in the page to keep load time acceptable in old browsers. (some libs like jquery-ui are very heavyweight for old IEs)
Prevent potentially repeated loading of JS libraries, both for performance and bug-prevention reasons. This happens when you have repeated blocks or multiple blocks including the same JS lib.
I've seen some potential solutions to this but none of them were very compelling from a performance or clarity perspective, so far.
You could use the {% include %} template tag. If you load js into the header you could do something like this:
base.html
<head>
<title>XXXX</title>
...
<script type="text/javascript" src="{{ STATIC_URL}}js/jquery.js"></script>
...
{% block site_header %}{% endblock %}
</head>
other.html
{% extends "base.html" %}
{% block site_header %}
...
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/urlify.js"></script>
..
{% endblock %}
You will have to adjust templates/pathes/etc. to your needs.
For this purpose, I personnaly use Django
Sekizai.
In my base template I have this block :
{% load sekizai_tags %}
<body>
# your own logic here
{% with_data "js-data" as javascripts %}
{% for javascript in javascripts %}
<script type="text/javascript"
src="{{ STATIC_URL }}{{ javascript }}" ></script>
{% endfor %}
{% end_with_data %}
</body>
Then, in my included or extending templates :
{% load sekizai_tags %}
{% add_data "js-data" "myapp/js/script.js" %}
Note you can define multiple blocks, and also use it for CSS, which is very
convenient.
Files added with "add_data" tag will never be repeated even if added several
times.
my problem is a bit unusual.
In my project I have a static js file with many functions defined there.
Then in each template I have a script tag where I define the necessary variables for this templates and call the function i need from the static file. And the view does nothing but rendering the template. So my template looks for example like :
{% extends "base.html" %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
{% block content %}
<script type="text/javascript">
$(document).ready(function(){
var first_var = 'foo';
var second_var ='bar';
my_function(first_var,second_var);
})
</script>
<div class="values"></div>
{% endblock %}
</body>
And the view simply looks like :
def my_view(request):
return render(request, 'my_app/my_template.html')
What I have to do, is instead of having to manually write the script tag in the template, have a custom template tag to which you can pass the variables needed and that will return the corresponding script. The reason i have to do that is to allow people who will use the app to avoid writing script and only wirte something like :
{% my_function 'foo' as first_var %}
I don't really know how to do this or if it's the right way to do so. The main point is using custom tags instead of wiritng the script, so how do you think this should be done ?