How to include html file in another to avoid repeating code? - javascript

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.

Related

Adding Javascript to layout.html template in Sphinx

I'm extending the layout of my sphinx-book-theme by adding the following to the layout.htmlunder my source\_templatesfolder:
{% extends "!layout.html" %}
{%- block extrahead %}
<script
type="text/javascript"
src="https://utteranc.es/client.js"
async="async"
repo="executablebooks/jupyter-book"
issue-term="pathname"
theme="github-light"
label="💬 comment"
crossorigin="anonymous">
</script>
{% endblock %}
When I build from source with the command:
sphinx-build -b html ....
The html output doesn't render the comment section at the bottom of the pages.
However, if I add the javascript bloc directly to the bottom of a Markdown file, the comment section appears at the bottom of the relevant page.
What am I missing here? When I inspect the page source, I can see that the javascript block is in the head section.
I'm using Sphinx v4.5.0 with the Sphinx-book-theme on a Windows OS
I managed to find an answer to my own question. :-)
Looking at the main 'layout.html', I figured out the template had a different structure and the blocks were using different naming conventions than the ones used in the default Sphinx templates.
So I changed my initial configuration by adding an extra block extraScript inside the block docs_main, then I added a block there under {super}:
{% block extraScript } {% endblock extraScript %}
Then I adapted the code indicated in my former question as shown below:
{% extends "!layout.html" %}
{%- block extraScript %}
<script
type="text/javascript"
src="https://utteranc.es/client.js"
async="async"
repo="executablebooks/jupyter-book"
issue-term="pathname"
theme="github-light"
label="💬 comment"
crossorigin="anonymous">
</script>
{% endblock extraScript %}
If you have a more elegant method to solve this issue, please share your ideas with us.

django use of templates views and ajax

Sorry I couldn't come with a more precise topic title and I must admit I'm still pretty new Django.
I am trying to work with Ajax and templates with splitted views but I can't achieve what I want, one way or another.
My goal is to be able to work with rendered templates and jquery hide/show instructions but I'm failing at some point.
Here is my urls.py:
from django.urls import path
from django.conf.urls import url
from . import views, inventory
urlpatterns = [
path('', views.index, name='index'),
url(r'^inventory', inventory.inventory, name='inventory'),
url(r'^buildInventory', inventory.buildInventory, name='buildInventory'),
]
My views index renders a templated "index.html" (there is a context that I removed for the illustration):
def index(request):
return render(request, 'myapp/index.html', context)
My index.html file :
{% extends "base.html" %}
{% load static %}
{% block delivery_form %}
<div id="mainblock">
....
</div>
{% endblock %}
And my base.html mostly contains my statics & headers:
{% load static %}
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" type="image/png" href="http://web-iec/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="{% static 'myapp/css/nice.css' %}">
<script type="text/javascript" src="{% static 'myapp/js/jquery.js' %}" ></script>
<script type="text/javascript" src="{% static 'myapp/js/jquery-ui.js' %}" ></script>
<script type="text/javascript" src="{% static 'myapp/js/inventory.js' %}" ></script>
<script type="text/javascript" src="{% static 'myapp/js/homepage.js' %}" ></script>
</head>
<body>
<div class="navBar">
<span class="navBtn" id="listDeplVer" title="Inventory">Inventory</span>
</div>
<div style="min-height: 100%;margin-bottom: -20px;">
{% block delivery_form %}
{% endblock %}
{% block inventory %}
{% endblock %}
</div>
</body>
</html>
Now what I'm trying to achieve, within my inventory.js I've got an onclick event that I'm trying to use to hide the home page content and replace it by the rendered html from my inventory.py view with associated html:
my inventory.py:
def inventory(request):
return render(request, 'myapp/inventory.html')
and my inventory.html:
{% extends "base.html" %}
{% load static %}
{% block inventory %}
<div id="inventoryblock">
// html
</div>
{% endblock %}
Finally my inventory.js is looking like:
$(document).ready(function () {
$( "#listDeplVer" ).click( function () {
$.ajax({
type: 'GET',
dataType: 'html',
url: '/myapp/inventory',
beforeSend: function(){
$("#mainblock").fadeOut();
},
success : function(output){
$("#inventoryblock").html(output);
},
});
});
So like I said I was expecting that onclick my page's content is replaced by the rendered inventory page, but this is not working.
When using the web developper tools, if I open the XHR request for the inventory in a new tab it work just fine, so I assume I'm doing something the wrong way.
Before merging everything in one single file (js, views, html & so on) I wanted to ask if there is way to have something similar to work ?
Thank you for your help
Your source page doesn't have an "inventoryblock" div. That's only in the page you're loading via Ajax. So when your success function runs, it doesn't know where to put the output.
You need to put an empty div with id "inventoryblock" in your index.html.
Also, your inventory.html probably shouldn't inherit from anything. You don't need the full HTML file with the head block etc, you just want the fragment containing the contents of inventoryblock that you can insert into the requesting page. Remove everything other than the relevant HTML itself.

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>

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 %}

Placeholders in Phalcon

I'm used to ASP.NET MVC, where I can define a section in a Razor view like this:
#Html.RenderSection( "scripts" )
I usually put this at the bottom of my layout view. That way, I can add scripts from my views like this and they will be included at the bottom of the body, where the scripts section is defined:
#section scripts {
<script>
(function () {
// do stuff...
}());
</script>
}
In Phalcon, I can put this at the bottom of my layout view:
$this->assets->outputJs();
Then I can add scripts from my views like this:
$this->assets->addJs('js/whatever.js');
The only downside to this method is the script for this view has to be in a separate file, which means a separate request. I'd like to be able to add the script directly to the view like I can do with Razor and still have it rendered at the bottom of the body. Does Phalcon allow you to do this?
Yes, you can use Partials:
<?php $this->partial("partials/js/whatever") ?>
Where js/whatever is a php template file in views/partials/js/whatever.phtml.
Also you can use Volt template engine and do the same:
{{ partial('partials/js/whatever') }}
or use include:
{% include "partials/js/whatever" %}
In Volt you can use also [Blocks][3] where you can define parts of main layout (such as footer) in main template file and in each view file you can define what should be placed there.
{# templates/base.volt #}
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}{% endblock %}
</div>
</body>
</html>
And in view:
{% extends "templates/base.volt" %}
{% block content %}
<h1>My page</h1>
{% endblock %}
{% block footer %}{{ partial('partials/js/whatever') }}{% endblock %}
Well as I wrote this is for Volt template engine for Phalcon, but if you're using plain PHP then I don't know similar solution. You could create simple service that gathers links to templates in controller and then output them as partials in main template.

Categories

Resources