What does {% include filename %} and {{ content }} mean inside HTML? - javascript

<!doctype html>
<html>`enter code here`
{% include head.html %}
<body>
<div class="container jumbotron">
<h1 class="text-center"><i class="fa fa-paper-plane float shadow"></i> Flyaway.css</h1>
<p class="lead text-right">~ created by <small><i class="glyphicon glyphicon-fire"></i> 進擊的燊</small> ~</p>
<ul class="list-inline text-center">
<li>
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=lushen&repo=flyaway&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</li>
<li>
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=lushen&repo=flyaway&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
</li>
</ul>
{{ content }}
{% include footer.html %}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/back-to-top.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/prefixfree.js"></script>
<script type="text/javascript" src="js/shake.js"></script>
<script type="text/javascript" src="js/flyaway.js"></script>
</body>
</html>
This is from an opensource project on Github. I just want to understand this code.
There are head.html and footer.html files, but when I open the default.html file on my computer,the head and footer file do not load on the web page. But on the other hand, when I use the 'check'-button on Chrome to see the source code, the head and footer are actually loaded.
At the same time, I've tried searching the internet to find what {{}} and {% include filename%} really are, but there seems to be no such a syntax.

This is most probably just template file of some templating framework, that code will get replaced with PHP or other server side language code.
For example
<?php include 'head.html'; ?>
Which will include to this document an actual file in same folder with that name.

This looks like a Twig PHP template. The documentation is here.

Related

Cannot open folder path directly from html <a> tag in Django template

I have created django template as:
{% extends '_base.html' %}
{% block title %}Checker{% endblock title %}
{% block content %}
<div class="container">
Click to open a pdf
</div>
{% endblock content %}
Whenever I try open that link Click to open a pdf it doesnot open that link.
I try this same process in plain html template it works as:
<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
</head>
<body>
<h1>Opening a folder from HTML code</h1>
<a href="D:/Plagiarism Checker/plagiarismchecker/assignments/datasets/file161.pdf">Click to open a
folder</a>
</body>
</html>
I want to open that link from django template. But I cannot open that path. I will be very thankful if you can resolve this problem. Thank you!!!
You need to inform Django about the paths where you want it to look-up a file by adding the paths to STATICFILES_DIRS in settings.py.
Check out the documentation here
Once you have added say up to the plagiarismchecker folder in STATICFILES_DIRS, you can call the file from the template like this <a href="{% static 'assignments/datasets/file161.pdf' %}">
You paths need to be relative to the paths in STATICFILES_DIRS

clusterize.js with django; static files not found

I am trying to use the https://clusterize.js.org/ javascript package with my Django website for displaying extremely large tables neatly and speedily. I downloaded the package's necessary js and css files, and referenced them in the html getting loaded when i visit my site's url: mysite.com/popularify
{% load static %}
{% block content %}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- uncommenting this line loading status files causes errors
<script src="{% static 'js/clusterize.min.js' %}"></script>
-->
<!-- I have a static/js/ folder -->
</head>
<body>
<div>
arthur russell = spotify:artist:3iJJD5v7oIFUevW4N5w5cj <br>
<!--HTML-->
<div class="clusterize">
<table>
<thead>
<tr>
<th>Headers</th>
</tr>
</thead>
</table>
<div id="scrollArea" class="clusterize-scroll">
<table>
<tbody id="contentArea" class="clusterize-content">
<tr class="clusterize-no-data">
<td>Loading data…</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
// clusterize JavaScript
var data = ['<tr>x</tr>', '<tr>z</tr>', '<tr>zxc</tr>'];
var clusterize = new Clusterize({
rows: data,
scrollId: 'scrollArea',
contentId: 'contentArea'
});
</script>
</body>
</html>
{% endblock content %}
And ensured that I have the two files in that location, when I try to access my site i am getting a 404 error only when I uncomment the line in my html file referencing the django static file.
My settings.py Django file has :
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
How can I make my html page load these static files ?
Looks like chrome version may not be compatible or it has something to do with the chrome extensions.
What you can do is to block background.js using this code:
$(document).ready(function(){
$.getScript("urlofscript");
});
To get the URL, hover on the background.js written on the inspection menu.
Hope this helps!
You path to other static files also doesn't seem to be correct
Django template support staticfile tag, so in your template at the top add load staticfile and include the static tag and the path is inside your static folder like so :
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<script src="{% static 'js/custom.js' %}"></script>

Load js files in a specific included php file

I found some problems to load js files in php file. I have file php admin-pp-sipp-litbang.php. Inside that file, I include some php files with switch case like that:
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<?php
switch (#$_GET['modul']) {
case "beranda":
include "tampilan-admin-pp/beranda.php";
break;
case "permintaanakun":
include "tampilan-admin-pp/permintaanakun.php";
break;
case "permintaanpp":
include "tampilan-admin-pp/permintaanpp.php";
break;
case "chat":
include "tampilan-admin-pp/chat.php";
break;
case "detailsproposal":
include "tampilan-admin-pp/details_proposal.php";
break;
case "detailspermintaanakun":
include "tampilan-admin-pp/details_permintaanakun.php";
break;
case "detailspengguna":
include "tampilan-admin-pp/details_pengguna.php";
break;
default:
include "tampilan-admin-pp/beranda.php";
}
?>
</div><!--/.main-->
After that, I load js files for tampilan-admin-pp/chat.php on admin-pp-sipp-litbang.php near close body tag . Here are the js files.
<script id="message-template" type="text/x-handlebars-template">
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >{{time}}, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
{{messageOutput}}
</div>
</li>
</script>
<script id="message-response-template" type="text/x-handlebars-template">
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">{{time}}, Today</span>
</div>
<div class="message my-message">
{{response}}
</div>
</li>
</script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js'></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/load_list_user_chat.js"></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/UserOnline.js"></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/index.js"></script>
The problem is the js files for tampilan-admin-pp/chat.php affects another included files. How can I load that js files only for tampilan-admin-pp/chat.php?
Is there any reason why you can't just move the <script> tags at the bottom of admin-pp-sipp-litbang.php into tampilan-admin-pp/chat.php?
If you need them to be included at the end of admin-pp-sipp-litbang.php, then you will need to use another switch statement or similar logic after the handlebars templates.
UPDATE:
The problem is that your php files are being conditionally included by the switch statement but your "chat" javascript files are being included every time regardless. You need to conditionally include the javascript files as well. You could just add the <script> tags to the original switch statement, but often javascript is better loaded just before the </body> ending tag, as you have done. To keep that characteristic, add another switch statement at the bottom of admin-pp-sipp-litbang.php before including the js files.
So
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js'></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/load_list_user_chat.js"></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/UserOnline.js"></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/index.js"></script>
Becomes:
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js'></script>
<?php switch($_GET['modul']):
case 'chat': ?>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/load_list_user_chat.js"></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/UserOnline.js"></script>
<script type="text/javascript" src="tampilan-admin-pp/chat/jss/index.js"></script>
<?php break;?>
<?php endswitch;?>
That way you can add other case statements that match the other includes at the top of the file to conditionally include their javascript too.
Maybe to make some variable inside tampilan-admin-pp/chat.php.
Something like $chatIncluded = true;
Then conditional rendering of script tag, if chatIncluded is defined and is true, load JS file.

Run jQuery Functions After AngularJS Loaded Views and Included Partials

I'm using both AngularJS (v1.6.4) and jQuery (v2.1.4) in my web application. I included static html files using ng-include. So my index.html is like that:
<body>
<div id="wrapper" ng-controller="mainCtrl">
<div ng-include="'partials/header.html'"></div>
<div ng-include="'partials/menu.html'"></div>
<div class="content-page">
<div ng-view></div>
<div ng-include="'partials/footer.html'"></div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="plugins/jquery-datatables-editable/jquery.dataTables.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.js"></script>
<script src="assets/js/main.js"></script>
<script>
$("#datatable-editable").DataTable();
</script>
</body>
As you see above I have 3 include files and 1 view. I used datatable in angular view. And I want to initialize it in my index.html file with $("#datatable-editable").DataTable(); But it doesn't work. When I write html elements directly to the page instead of including, it works fine. Why is this happening? How can I solve it?

How do get JQuery to work when I am using AngularJS partials?

I have the below code. However, my JQuery wont run when the #id and .classes it is looking for are in partials when viewing this static page. How do I get it to work?
<body ng-app>
<h2>JQuery wont run if code it is looking for is in a Partial</h2>
<div ng-include="'_includes/partials/menu.html'" ></div>
<br />
<h2>JQuery will work if the code it is looking for is here on the page (DOM)</h2>
<div class="container">
<div class="row">
<div class="col-xs-12">
<ul class="nav">
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Services</a></li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="_includes/scripts/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="_includes/scripts/custom.js"></script>
</body>
It is not a good practice to try to find html elements and modify them in an AngularJS app as you would normally do in a JQuery enabled html. Instead, try to implement whatever you are thinking of only using Angular.
Anyway you want to use ng-directives instead jQuery calls.

Categories

Resources