I have some function, which can be running for a continuous period of time, I run it using FastAPI background tast like that:
background_tasks.add_task(my_func)
after that returning template with progressbar using
return templates.TemplateResponse('progressbar.html', context={"request": request})
How can I define the length of a progressbar iteration and send values to show progress?
progressbar.html:
<html>
<head>
<title>Upload data</title>
<link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
<link href="{{ url_for('static', path='/progressbar.css') }}" rel="progressbar">
</head>
<body>
<a>Uploading</a>
<div>
<progress id="progressbar"></progress>
</div>
<form action="/final" method="get" >
<h1>
<input type="submit" value="Start upload">
</h1>
</a>
</form>
<p>Return to home page home page</p>
</body>
</html>
Related
I am trying to pass in a list of classes into a checkbox (this works), and when the Submit button is clicked, I want to make a Post Request to send all the selected boxes to the backend and then also go to the next page (Does not work).
Here is my HTML page right:
<!doctype html>
<html lang="en">
<head>
<style>
h1 {color: rgb(240, 112, 38);}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
function myFunction() {
window.location.href="./classinfo";
}
function sendPOST() {
let formData = { user_classes: $("#user_classes").val() };
$.post("/class", formData)
};
</script>
</head>
<body style="background-color:powderblue;">
<div class="container">
<br>
<h1>What Classes Have You Taken</h1>
<div class="form-group row">
<label class="col-lg-12">
<form method="POST" action='/class'>
<label class="col-xs-6" style="font-family:verdana;">
{% for c in cs_req %}
<input type="checkbox" style="text-align:left;" name = 'user_classes' option value = "{{c}}" SELECTED> {{c}}<br></option>
{% endfor %}
</label>
<br>
<input class="btn btn-secondary" style="font-family:verdana;" type="Submit" onclick="sendPOST();MyFunction()">
</form>
</label>
</div>
<div id="content">
</div>
</div>
<script>
$(document).ready(function(){
$('.selectpicker').selectpicker();
})
</script>
</body>
</html>
and my backend function is this:
#app.route('/class', methods=["POST"])
def store_classes():
"'Based on checkboxes selected from checkboxes(), store the classes in txt'"
user_classes = request.form.getlist('class') #--> returns nothing
return render_template("class.html")
My onclick is not sending the post request or going to the next page. I'm not sure how to solve this so any advice is appreciated.
i Have python server with flask running on it
from flask import Flask,render_template
app = Flask(__name__)
#app.route("/")
def main():
return render_template('index.html')
if __name__ == ("__main__"):
app.run(debug = True, host = "0.0.0.0", port =80)
this is index.html there is simple form and send button
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>whatl0ol</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<div class="login">
<div class="heading">
<h2></h2>
<form action="#">
<div class="input-group input-group-lg">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" placeholder="">
</div>
<button type="submit" class="float">check</button>
</form>
</div>
</div>
</body>
</html>
i need solution to when user sends from index page, take it from python send to API.
need advices about site bandwith also.
thanks
make sure you have css files at this path
/your-project/static/css/style.css
also change your css in template to load it from static folder
<link href="{{ url_for('static', filename='css/style.css') }}" />
I am trying to dispaly a folium map in a flask web page which consists of a form containing 2 bootstrap selects and a submit button. The form elements work fine before the map is loaded. But when the map is loaded selects are not clickable.
This is my python script
from flask import Flask, render_template, request
import folium
app = Flask(__name__)
#app.route("/home")
def home():
return render_template("home.html")
#app.route("/result", methods =['POST'])
def result():
map = folium.Map(location=[53.3975054,-10.1987964], zoom_start =9, tiles ='Stamen Terrain')
map.save(outfile='templates/countries.html')
return render_template("result.html")
if __name__=="__main__":
app.run(debug = True)
home.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-responsive.min.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/sl-slide.css')}}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
</head>
<body>
<section id="about-us" class="container main">
<div class="row-fluid">
<div class="span8" >
<div class="blog">
<div class="blog-item well">
<h2>Heading2</h2>
<form action="{{ url_for('home') }}" method="POST">
<div class="form-group">
<select class="selectpicker" name="select_country" data-live-search="true" data-style="btn-primary">
<option >Country1</option>
<option >Country2</option>
</select>
<select class="selectpicker" name="select_event" data-live-search="true" data-style="btn-primary">
<option >Event1</option>
<option >Event1</option>
</select>
<input type="submit" class="btn btn-info" value="Submit Button">
</div>
</form>
</div>
</div>
</div>
</div>
</section>
{%block content%}
{%endblock%}
</body>
</html>
result.html
{%extends "home.html"%}
<div>
{%block content%}
{%include "countries.html"%}
{%endblock%}
</div>
How can I fix this?
It worked when i used an iframe inside the html file to display the map.
I am learning to create a website using django. I have a homepage through which user can select city. The next page shows the list of hotels.It works properly,but when page is refreshed it gives me error
This is my html file for list page.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="../js/typeahead/0.11.1/typeahead.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
{% load static %}
<script src="/static/typeahead.js "></script>
</head>
<body>
<div >
<div style="float:left; background-color:#d9d9d9;margin-top:100px;width:30%;height:800px;">
<h2 style="text-align:center;">Filters</h2>
<div style="width:95%; margin-left: 10px; " >
<form method="post" data-ajax="false" action="{% url 'list' %}">
{% csrf_token %}
<div data-role="rangeslider" data-mini="true" style="width:100%">
<label for="range-1a">price:</label>
<input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range">
<label for="range-1b">Rangeslider:</label>
<input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range">
</div>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div style=" float:right;margin-right:30px;margin-top:100px;width:60%;height:80%">
{% for hotel in city_list %}
{% load static %}
<div class="col-md-4" style="width:45%;border:0;position:relative;">
<div class="thumbnail" style="height:300px; background-color:black;border:0;border-radius:0;position:relative;box-shadow:0;" >
<a href="/w3images/lights.jpg" data-ajax="false">
<img src="{% static hotel.photo.url %}" style="border:0;height:85%;width:100%;" >
<div class="caption">
<p style="color:white;">Name</p>
</div>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
This is my views.py
def homepage(request):
hotel_list=Hotels.objects.all()
context={'hotel_list':hotel_list}
return render(request, 'polls/homepage.html',context)
def wholelist(request):
hotelvar=request.POST.get('service_type')
if hotelvar=='Hotels':
city_list=Hotels.objects.filter(city_name__iexact=request.POST.get('searchabc'))
if not city_list:
hotel_list=Hotels.objects.all()
context={'hotel_list':hotel_list}
return render(request, 'polls/homepage.html',context)
pricemin=200
pricemax=800
context={'pmin':pricemin,'pmax':pricemax,'city_list':city_list}
return render(request, 'polls/list.html',context)
i get the following error when refreshed
UnboundLocalError at /polls/wholelist/
local variable city_list referenced before assignment
city_list is being passed from the homepage, but when page is reloaded it not being passed. Is there a way to pass it when page is refreshed?
when hotelvar not equal to 'Hotels', variable city_list is not set
def wholelist(request):
hotelvar=request.POST.get('service_type')
city_list = None
if hotelvar=='Hotels':
city_list=Hotels.objects.filter(city_name__iexact=request.POST.get('searchabc'))
if not city_list:
hotel_list=Hotels.objects.all()
context={'hotel_list':hotel_list}
return render(request, 'polls/homepage.html',context)
pricemin=200
pricemax=800
context={'pmin':pricemin,'pmax':pricemax,'city_list':city_list}
return render(request, 'polls/list.html',context)
I've been having trouble customizing Django-Allauth templates. Might be an issue with my TEMPLATE_DIRS value, or with something I'm unaware of. If I point my TEMPLATE_DIRS to just the "Templates/AllAuth" folder in my project directory, it ignores my customized templates. Right now, it's ignoring my current base.html file and my current signup.html/login.html file even though the report says the error is coming from the correct file/folder. How can I fix this?
Unclosed tag 'block'. Looking for one of: endblock
My current base template:
{% block content %}
{% endblock %}
The error occurs on my signup.html page, which looks like:
{% load staticfiles %}
{% load url from future %}
{% load i18n %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% trans "Sign Up" %}</title>
<link rel="stylesheet" type="text/css" href="{% static "stylesheets/sign-up.css" %}" />
<link href="http://fonts.googleapis.com/css?family=Arvo:400,700|Open+Sans" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="logo">
<img id="logo" src="{% static "media/mobile-logo.gif" %}" />
</div>
<div class="wrapper">
<div class="omni-box">
<p>Create Your My_APP Account</p>
</div>
<div class="sign-up-form">
<form id="sign-up" method="post" action="{% url 'account_signup' %}">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Sign Up!" />
</form>
<h3>OR</h3>
<p class="facebook"><img class="social-button" src="{% static "media/facebook.png" %}" />Connect With Facebook</p>
<p class="twitter"><img class="social-button" src="{% static "media/twitter.png" %} />Connect With Twitter</p>
</div>
</div>
</body>
</html>
My Template Settings:
TEMPLATE_LOADERS = ('django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader')
TEMPLATE_DIRS = (os.path.join(BASE_DIR, 'templates','allauth'))
And in my templates/allauth/account folder, I have all of the template files that I have customized. That folderl ies in my project directory.
Might be a little late, but I solved this problem by changing the order of apps in settings.py. You have to put allauth AFTER the app in which your templates reside.
You should place your template files under templates/account not under templates/allauth/account.