Single page application using django-Nav Bar for django app - django

In Angular,we can use routing to create SPAs . So I can have a navigation bar that's common for all templates(or written only once). Basically only required part of the page loads everytime .
But in django,so far I haven't seen anything like it. Do i have to include the code for the Nav bar in each template file?

You just have to write single time in any html file you can name whatever you want for example _base.html is the file which contains navbar code then i want to insert in every other html file then i just have to enter tag {% extends '_base.html' %} at the top of the other files and that will load the _base.html there as well. If you need more relevant code you can consult that repository as well https://github.com/wsvincent/djangox

Related

How to use a base.html for default Wagtail Page instance?

Wagtail starts new projects with a single welcome template. However, this template does not inherit from any parent template, such as a base.html. In our project, we have previously defined a base.html containing global HTML tags and CSS/JavaScript includes.
How can we tell the default Wagtail Page model to display in a template that extends base.html?
To clarify, there are two possible setups, depending on how you create your project:
If you start a new project from scratch with wagtail start myproject, the initial migrations (which exist partly within Wagtail itself, and partly within the project template) will set you up with a HomePage model and an initial homepage. The template for this page type lives at home/templates/home_page.html, and is already set up to inherit from a base template (which lives at myproject/templates/base.html).
If you follow the documentation for integrating Wagtail into an existing Django project, the initial migrations (which in this case are entirely within Wagtail) will give you an initial page of type wagtailcore.Page. You're not really expected to use this page type directly (not least because it has no fields beyond the title, and no way of adding new ones) - it's only done this way because there are no "proper" page models set up yet, and there needs to be something as the initial state of the page tree. The idea is that once you've set up at least one page model within your app, you can create your real homepage, point the Site record at it (in Settings -> Sites), and delete the initial stub one.
Nevertheless, if you really want to give wagtailcore.Page a full-fledged template with a base template, you could create a template file inside one of your project's apps at the path templates/wagtailcore/page.html. As long as the app in question is above 'wagtail.core' in the INSTALLED_APPS list, this will override the barebones template supplied by Wagtail.
{% extends "base.html" %}
Add that to your template, it will extend anything in the base.
If your base template has blocks in it, you use the same syntax
{% block content %}
This will appear wherever you have this same block in the base.html template
{% endblock %}
Wagtail is built on top of Django, you can read more about its templating language here: https://docs.djangoproject.com/en/3.0/ref/templates/language/

How to make input box work in the result page

I am learning Django and i learn on making small project for lEARNING PURPOSE.
I learned how work with input and use as variable. Now i want to use search box with the same principle.
Please see the link of input based :
https://stackoverflow.com/questions/58813945/changing-form-to-search-box
index.html is the input after inserting info and clicking ok it directs to index2.html which shows the results
What I need to change besides POST to GET to make it work as it works with input function? do i need to change form, models?
My concern also i want to inset search bar in the navigation in index2.html where user can make search from the result page. This is my index2.html page. I tried to put {{form.as_p }} inside the form function but it does not work. I want after putting infro in search box and clicking search glyphicon (which does not work) will stay on the same page index2.html
I searched the internet and read stackoverflow other examples, but they use complicated version, i need a simple one :
1. i want to have search box on index.html page so it does not show me the name in front of input box and
2. i want search box in the index2.html page keep implementing the same function as index.html so a user do not have to go the initial page to search new data.
Any help or tips would be highly appreciated.
Since you're using bootstrap4 I would recommend to use its template tags and form field customization options.
Example:
{% bootstrap_field form.login show_label=False addon_before='<span class="fa fa-user"></span>' %}
Not: this example uses Font Aweseome for icons.
Also you're not using the real power of Django Bootstrap4, see Quickstart. You can always override the version of Booststrap or the CDN used in your settings.py if needed: Settings.

Django - How to setup dynamic templating within django

So I am having this major issue regarding the templating setup. I have a model that is created and attaches html, JS, and CSS files on upload to a corresponding folder with the model name. The user is able to upload these files (HTML,CSS,JS), and I need to be able to access the HTML file within this weird location.
/template/app/app.html (the location where the view leads, which idc about)
/media/uploads/modelName1/base.html ( I want to dynamically link each view with their corresponding model folder )
/media/uploads/modelName1/style.css
/media/uploads/modelName1/base.js
for the view I made it so the HTML file of the model is passed within the template and then I can use {% include %} but obv that can't work b.c the HTML included isn't even part of the template. If you have any suggestions on how to approach this problem, it would be much appreciated.

reading and caching html fragment for use on django template

I need to grab four html fragments from an external web site and display them within my django site's header and footer. I definitely need to cache these for some period of time.
My initial thought was to use urllib2 to read the http and then write the html to files to my server. Implemented through a Django context processor, the code checks the timestamps of the four files and retrieves updated versions if necessary before reading them into template variables.
I appear to be maxing out Django's template variable size for one of the four files. This forced me to use readlines() and to pass that file into the template as an array.
Is there a more elegant way to retrieve four html fragments from an external site, cache them and pass them to my templates?
Here's what my base.html template looks like now:
{{ integration_prehead|safe }}
<head>
{{integration_head|safe }}
...
</head>
{% for l in integration_topper %}{{ l|safe }}{% endfor %}
{{ block content }}{{ endblock content }}
{{ integration_footer|safe }}
The prehead.html isn't much of anything other than the doctype and opening html tag. The head.html is a bunch of javascript and stylesheets. The topper.html and the footer.html are the biggest pieces and they're the top and bottom of the pages. The topper, in particular, can change every 15 minutes so it's not practical to hard-code it on my templates.
Topper is 39k and too big to read into a single Django template variable, hence the for loop.
If you have any control over the server you're pulling the fragments from, your best bet is to set up dedicated views that return just the fragments and not the entire HTML document.
You can then use Django views to either manually save the fragments to disk or use Django's Cache framework. The cache framework will be much more robust and provide additional means of storage such as via database or memcached, but it's not guaranteed to store the fragment for a defined period of time. For example, memcached will lose everything if the server has to be restarted.
If the source server is not in your control, I'd highly recommend that you run the document through an HTML parser first, and pull out and pass in to your template only the pieces that your need. BeautifulSoup is a nice one for python.

How to manage Javascript modules in django templates?

Lets say we want a library of javascript-based pieces of functionality (I'm thinking jquery):
For example:
an ajax dialog
a date picker
a form validator
a sliding menu bar
an accordian thingy
There are four pieces of code for each: some Python, CSS, JS, & HTML.
What is the best way to arrange all these pieces so that:
each javascript 'module' can be neatly reused by different views
the four bits of code that make up the completed function stay together
the css/js/html parts appear in their correct places in the response
common dependencies between modules are not repeated (eg: a javascript file in common)
x--------------
It would be nice if, or is there some way to ensure that, when called from a templatetag, the templates respected the {% block %} directives. Thus one could create a single template with a block each for CSS, HTML, and JS, in a single file. Invoke that via a templatetag which is called from the template of whichever view wants it. That make any sense. Can that be done some way already? My templatetag templates seem to ignore the {% block %} directives.
x--------------
There's some very relevant gasbagging about putting such media in forms here http://docs.djangoproject.com/en/dev/topics/forms/media/ which probably apply to the form validator and date picker examples.
Been a while since I posted this problem. What I've been doing to solve it is:
write the javascript parts you need as a library which is served statically
call the routines in the static library from the template with your server side values
Restraint is required to write it in such a way that it acts as a client side script only; don't be tempted to try and inject values from the server at the time of serving the js. Ultimately I've found it less confusing to apply server side variables strictly in the html template.
In this way I'm able to:
keep the javascript selectors on html tags inside the same file (ie: the template)
avoid templatetags altogether
re-use each javascript library in different places, and
keep the css/js/html pieces in all the places where they're expected to be found
It's not perfect, but it's getting me by till a neater idea comes along.
For example a js library in "media/js/alertlib.js" might include:
function click_alert(selector, msg){
$(selector).click(function(){ alert(msg) })
}
and the template has:
<script type="text/javascript" src="media/js/alertlib.js"></script>
<script type="text/javascript">
click_alert('#clickme', {% message %})
</script>
<div id='clickme'>Click Me</div>
If more than one page uses a given JS file you should consider concatenating all of them together and minifying the result. This reduces net connects which will improve overall page load time. Don't forget to bump your expire time out to at least a week or two.
Have a look at Django Sekizai that has been created for just that purpose.
I think you are going to have a hard time keeping all four pieces together and applying them in a fell swoop - simply because some appear in your <head> tags and others in the <body> tags.
What have done is made sure that jQuery is loaded for all pages on my base.html (as well as my base css file) ... then, I have block tags for {% block css %} and {% block js %}. Templates that inherit the base.html file can supply their own javascript and css (and only the stuff that is needed).
I have created some template tags that create ajax functions whose output is based on the object being displayed (for example, including the object_id) -- which cuts down on re-coding.
One thing I haven't tried but am interested in is django-compress.