How I render content page to another html page - django

I have already base.html page. How I can get my specific contact page information into my home page with jinja

If I'm understating your question correctly, within your home.html you can use the include tag {% include 'contact.html' %} to have that bit of contact information be displayed directly in your home page from another template. For example:
Within your home.html
<body>
####
<!-- Home page information being displayed already -->
####
<!-- To include your contact page information -->
{% include 'contact.html' %}
</body>
Within your contact.html only the section where you have the contact information will be necessary and not the entire contact page, for example:
Instead of having
<!DOCTYPE html>
<html>
<head></head>
<body>
<section>
<!-- Other elements with the contact information -->
</section>
</body>
You will only use the section below within your `contact.html` file.
<section>
<!-- Other elements with the contact information -->
</section>

Related

Django 3.0: How to use different Boostrap versions in same template

I have made a template (Base.html) in my django project, of Bootstrap 4 which working is fine independently.
I have also made another template (Child_Base.html) which is made with Bootstrap 3 and supposed to be injected in Base.html.
But what happening here is, when I include BS3 template in first one it is ruining many things. So, I am looking for a solution in which both co-exist and doesn't spoil other one.
Code of Base.html is supposed as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>
{% block bodyblock %}
Hello World!
{% include "Child_Base.html" %}
{% endblock %}
</p>
</body>
</html>
Code of Child_Base.html is supposed as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<p>
{% block bodyblock %}
Good Morning!
{% endblock %}
</p>
</body>
</html>
In actual scenario, there is product page, displaying all the books available for user to add in cart (made in BS4) in which I want to include search box (made in BS3). But code is tangled and not so self-elaborated so I have used above examples. Thanks.
why you want this?
you either include CSS files in your templatename.html file or in a different name.css file that is linked to your template, when you include bt3 and bt4 browser DOM looks like this:
pages:
index.html
files:
bt3.min.css
bt4.min.css
and then it gets crazy cause two different CSS files with same tags are in browser DOM.
I'm not telling this is not possible cause in frontend frameworks like vue.js you can config it to use CSS locally just for one component, but Django doesn't generate files like that so you can't have two different CSS files isolated from each other for one HTML page.
on second Thought:
maybe if you make your page.html with a scheme like this:
headers and other head tags...
<body>
<section>
<style>
include the entire bootstrap 4 css here
</style>
enter your bt4 elements here
</section>
<section>
<style>
include entire bootstrap 3 css here
</style>
enter your bt3 elements here
</section>
</body>
you should put .min.css in this may cause the browser to render the page with your desired styles as always CSS files are overwritten by lower CSS's in the file.

Removing newlines from the end of base.html file makes some elements disappear from DOM

This is a strange bug. I have an html file that extends a base template called base.html. I noticed that a script tag right before the end body tag in the base template doesn't show up in the DOM in the Elements tab of the Chrome dev tools, and the tag is cut off completely along with the rest of the html file in the Sources tab. This happens in Chrome, Mozilla, and Safari, so it must be a problem on the Django side. And obviously the observable effects on the page that the script should create aren't happening either.
Here's the end of the rendered html in the Sources tab:
<section>
what is going on
</section>
<footer></footer>
<script src="/static/home/js/ba
Completely cut off. Here's the end of that base template:
{% block main %}{% endblock %}
<footer></footer>
<script src="{% static 'home/js/base.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>
Now, here's where it gets funny. The trouble is at the end of the file, so I just added some newlines to see if there's any difference in the DOM is rendered:
{% block main %}{% endblock %}
<footer></footer>
<script src="{% static 'home/js/base.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>
And the Sources tab showed a cut off later in the tag:
<section>
what is going on
</section>
<footer></footer>
<script src="/static/home/js/base.j
I won't paste it here, but I added about 35 newlines to the end of the file before I got what I wanted in the Sources. It seems that every newline cuts off the rendered html one character later.
<section>
what is going on
</section>
<footer></footer>
<script src="/static/home/js/base.js"></script>
</body>
</html>
And the effects from the script finally worked. This feels like a temporary solution to something deeper that needs to be fixed. Anybody have any clue what the hell is going on or where to look?
Edit: Here's the template (located in the work app) that extends base.html (located in the home app), called work.html:
{% extends 'home/base.html' %}
{% block css %}
<link rel="stylesheet" href="{% static 'work/css/work.css' %}">
{% endblock %}
{% block main %}
<section>
hello
</section>
{% endblock %}
And here is the view that renders it:
from django.shortcuts import render
def work(request):
return render(request, 'work/work.html', {})
Edit 2: some more unexpected results:
When I deleted the script (so that I can paste it in head as suggested in the comments), the end of the rendered html was this:
<section> what is going on </section>
And pasting right before the </head> tag resulted in:
<section> what is going on </section>
<
Same result above when I commented it out in head.
Commenting out the script when it's before the </body> results in this:
<section> what is going on </section>
<footer></footer>
<!-- <script src="/static/home/js/base.j
And replacing single quotes with double quotes resulted in the rendered html showing double quotes instead of single quotes as the only difference. :/
Then I deleted almost everything so that my code was this:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
And that rendered:
<!DOCTYPE html>
<html lang="en-US">
<head>
<scrip
I added back some tags:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
And the result:
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="http://127.0.0.1:357
For some reason, the script tag generated by django-livereload-server remains. This is what the full script tag looks like:
<script src="http://127.0.0.1:35729/livereload.js"></script></head>
Mystery's over everybody. The problem is that you should not pip install django-livereload-server. I don't know what it does behind the scenes but some of my html disappear based on some weird algorithm.
So, to uninstall django-livereload-server, remove 'livereload', from your INSTALLED_APPS, remove 'livereload.middleware.LiveReloadScript', from your MIDDLEWARE, hit Control-C to get out of that livereload terminal process, Control-C in the window running the runserver process to apply the changes (because livereload latches onto runserver like a leech, so you have to restart), and enjoy expected output. And pip uninstall django-livereload-server. If anybody has any suggestions for a livereload type of app that works (where the browser reloads the page when you type something new in your html/js/css), let me know. For now I guess it's back to the old manually typed Command-R.

including views in a master view laravel 5.3

It is my first app with laravel. I tried too much to follow template rules to implement them in my app but actually I don't know did it in a correct way or not. Using the way I did, when I need to Redirect to a previous page it backs to / page and for example when I need to stay on the same page after submitting a form, I can not make the specific view or maybe I don't know how to use it. Do you think implementation is correct or not?
This is my master view:
<!DOCTYPE html>
<html lang="en" dir="rtl">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<meta charset="utf-8">
<title>{{ $page_title }}</title>
{{ Html::style('css/styles.css') }}
{{ HTML::script('js/core/app.js') }}
</head>
<body>
<!-- Header -->
#include('header')
<!-- Header -->
<!-- Sidebar -->
#include('sidebar')
<!-- Sidebar -->
<!-- Main content -->
<div class="content-wrapper">
<div id="container"></div>`
</div>
<!-- /main content -->
</body>
</html>
This is my typicall included view:
#extends('Content_template')
#section('pageContents_js_files')
<script type="text/javascript" src="{{ asset("js/validate.min.js") }}"></script>
#stop
#section('pageContents')
<div></div>
#endsection
And this is a piece of html that is attached to all the typical views:
#yield('pageContents_style_files')
#yield('pageContents_js_files')
<!-- Page header -->
<div></div>
<!-- /page header -->
<!-- Content area -->
<div class="content">
<!-- Page Contents -->
#yield('pageContents')
<!-- /Page Contents -->
<!-- Footer -->
#include('footer')
<!-- Footer -->
</div>
<!-- /content area -->
I am using ajax to include views to master template when an <a> tag with include class is clicked:
$(document).ready(function() {
$(".include").click(function(event)
{
$.ajax({
url: 'include/' + $(this).attr('id'),
type: 'GET',
success: function (data) {
$data = $(data);
$('#container').html($data);
}
});
//}
});
});
And finally the route (all the views are stored in pages directory):
Route::get('include/{param}',function($param){
return view('pages.'.$param);
}
It's not necessary to use ajax. Just yield all js an css files to master blade, also yield other pages to master, then you can call them through routes.

How to use links to local server as href in Django?

I want to have links that are clickable . That link is a path in a server.
Example:
file:///I:/IT/Install/Winrar/
SO far I have my view code:
def installables_available(request):
install_path = r'I:/IT/Install/'
list_setup = os.listdir(install_path)
full_path = [os.path.join(install_path, item) for item in list_setup]
return render(request, 'generic/installables.html', {'full_path': full_path})
And the html looks like:
<html lang="en">
<head>
<title>All Installables</title>
</head>
<body>
<h1>Below are all setups available</h1>
{% for name in full_path %}
<ul>
<li><a href={{name}}> {{name}}</a></li>
</ul>
{% endfor %}
<hr>
<p>Thanks for visiting my site.</p>
</body>
</html>
I do get the page showing links but , If I click them, they don't do anything. But hovering on them shows the correct path i.e e.g file:///I:/IT/Install/Winrar/.

Do I have t paste google analytics on evey page of my dgango app or just the base template?

Do I have to paste my ananlytics code into every page of my django app or can I just do it in one spot, the base, similar to disqus?
You can do it in the base page and that will be included in every actually generated page.
You can have, for example, a master_page.html in which you put the main wrapper HTML including your Google Analytics code. The main part of your master page would have:
<html>
<head>
<!-- Google Analytics code -->
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Then your content page will have something like:
{% extends "master_page.html" %}
{% block content %}
Your content for the page.
{% endblock %}