My website have submenus for sections. What I want to do is, when users click the submenu, the content changes accordingly. For example, if user clicks "Pen", the contents of the shall be list of pens, clicks "Eraser" , contents shall be eraser list.
How can I achieve this by using Django template and ajax? I know that I could retrieve the information as JSON data and parse it to update the div, but that requires a lot of work and I cannot use the Django template functionality.
I managed to pass the AJAX request to the server and process the list, but how can I return the rendered template as AJAX result?
Simply return the rendered template fragment. You don't need to do anything special. Your Javascript can then just insert it into the DOM at the relevant point.
Related
I have a Django server which is locally hosted and displays sensor data from a MySQL database. This data is displayed on the instruments.html page through variables such as {{qs.value}} which comes from the views.py, models.py and URLs.py. The views.py page is as follows:
from django.http import HttpResponse
from django.shortcuts import redirect, render
from .models import Sensorresult
def db(request):
qs = Sensorresult.objects.using('Vision').get(sensorresult='1')
return render(request, 'authenticate/instruments.html',{'qs':qs})
The problem I have is that I want the database information to update on the html every second, whereas currently it only updates when the page is refreshed. I know I could place a line of javascript at the top of the page and have the entire webpage constantly update, but I only want the database values to update. Does anyone have any suggestions as to how to do this?
From googling have come across Ajax, however this is something I have no experience in and I am unsure how my code would be edited to accommodate this?
Many thanks
You may want to consider using htmx.
Very simple library which takes away the JavaScript complexity to update parts of a web page rather than a full page reload and allows you to do most of the work in html.
Their docs specifically make reference to polling to update a certain part of the page which seems to be exactly what you’re trying to achieve.
Essentially all you’d need to do is create a view that returns a template partial, then use htmx polling to hit that url and replace a div with the partial the view returns.
Instead of directly using fetched data in HTML, you can try fetching it in javascript.
And if you have ever created the clock with javascript, it does not reload the entire page but still updates the time. You can use the same way to update that fetched data in HTML.
I have HTML page that contains a title and content that title, I had created an edit link that directs me to another page that should let me update the title and the content, and after editing click a button to save that update.
How i can let the user do this kind of updating using Django?
this is my HTML page
<h1>CSS</h1>
<p>CSS is a language that can be used to add style to an HTML page.</p>
<ul>
<li>Edit</li>
</ul>
I think the best way to do this would be to use Django template language.
You will have to store the title and content in a variable somewhere. Then, your edit page should update these variables when the user wants to update them.
If you use a template for your HTML, then you can simply use the value of this variable in the template, so that whenever the edit page changes something, it's automatically changed in this page.
I have two question from bottle python web framework
Question 1. In my website http://localhost:8080/home
i am browsing via browse button to fetch excel file.i will process
excel file i want to show the data in same
http://localhost:8080/home page.
But when i google, they asked me to create template.
Do we have only option to go for template or any possibility to
display in the same home page
Question 2:
I created template file and able to show results in the template but
i style sheet is not reflected in the template.
i tried href =/static/style.css i tried href
=/app/static/style.css i tried like URL get_url('static',
Thanks Mani.
Well, If you are rendering anything, you definately need a template. Of course, you can create this template in a flexible way, but it's up to you.
When it comees to the second question, the url should be put in quotation marks. Compare
I don't know how dumb my problem is, but I really couldn't figure out how to solve it
So, I have a html page that is rendered by flask, the page contains a variable {{ log }} (string) that is initially empty.
#app.route('/some-roote')
def function(id,log='some string'):
return render_template('webpage.html',log= log)
When the page is rendered initially, everything works fine, ('some string' is displayed in the UI)
At some point of my execution, I would like to change the content of {{ log }} and display the new content to the user.
I tried doing:
logs = new content;
render_template('webpage.html',log= logs)
but nothing happened, literally, the string value doesn't change, the webpage doesn't refresh, and I don't get any errors...
Please help guys. what am I doing wrong?
Jinja2 templates cannot change a page without the browser refreshing, they are simply a way for you to place dynamic content on a page before sending it to the browser. To change your page while on the client's browser you'll need to use javascript.
You can perform an ajax call from the browser back to your server, which then the server can send back the updated log variable. However, you'll then need to use javascript again to update that text on the DOM.
The best library for this is jQuery. You can also use frameworks like AngularJS and EmberJS that help you with data binding (among many other things).
You'll have to branch out into javascript for this kind of interactivity. Unfortunately, Python does not run natively in the browser.
I was not able to come up with a better title for this post, so if anybody does not find it appropriate , please go ahead and edit it.
I am using flask as my python framework, and normally I render templates doing somnething like the below:-
#app.route('/home')
def userhome():
data=go get user details from the database
return render_template("home.html",userdata=data)
Now I have a template name home.html in which I iterate over the values of "userdata" like userdata.name, userdata.age etc and these values take their appropriate spaces in the template.
However I am working on an application in which navigation is via ajax and no fall back if javascript is not available(basically the app does not work for ppl without javascript).
The navigation menu has say few tabs on the left ,(home,youroffers,yourlastreads). The right column is supposed to dynamically change based on what the user clicks.
I am unable to understand how I handle templating here. Based on what the user clicks I can send him the required data from the db via a json through an xhrGET or xhrPOST.Does the entire templating have to be handled at the server end and then transfer the entire template via an ajax call. I actually dont like that idea much. Would be great if someone could point me in the right direction here.
Now in the page that is loaded via ajax , there are some scripts which are present. Will these scripts work, if loaded via ajax.
You have two options: template on the server, or template in the browser.
To template in the server, you create an endpoint much like you already have, except the template only creates a portion of the page. Then you hit the URL with an Ajax call, and insert the returned HTML somewhere into your page.
To template in the browser, your endpoint creates a JSON response. Then a Javascript templating library can take that JSON, create HTML from it, and insert it into the page. There are lots of jQuery templating solutions, for example.
I would choose server side templating, because unless you find a JS library that handles the same templating language your code isn't going go be DRY.
In the home.html template, I'd do something like
<%extends base.html%>
<%include _user_details.html%>
... <% footer and other stuff%>
And keep the actual markup in _user_details.html. This way, for an AJAX request you just render the _user_details.html partial only.