I want to create multipleselecetfild that each selection referin to each choice appears below the image.
I used the django MultiSelectField to create a form to have multiple select options.
These are my files:
models.py
class Profile(models.Model):
cat_choices = (
('Internships', 'Internships'),
('Scholarships', 'Scholarships'),
('EntranceExams', 'EntranceExams'),
)
category=MultiSelectField(choices=cat_choices,default='none')
profile.html
<!DOCTYPE html>
<html>
<body>
<style>
div.item {
vertical-align: top;
display: inline-block;
margin-right: 50px;
text-align: center;
width: 120px;
}
img {
background-color: grey;
}
.caption {
display: block;
}
</style>
<div class="item">
<img src="internship.png">
<span class="caption"><input type="checkbox" name="Internship" value="Internship"></span>
</div>
<div class="item">
<img src="jobs.png">
<span class="caption"><input type="checkbox" name="Jobs" value="Jobs"></span>
</div>
<div class="item">
<img src="scholarship.png">
<span class="caption"><input type="checkbox" name="Scholarship" value="Scholarship"></span>
</body>
</html>
I created a form called profile_form with the category field.
In html, I wanted my form to appear with an image on the top and just a check button below the image, with the check button refering to each cat_choices in the category. Something like this
!In the image I used html to display it.
How do I write this html page in django such that each check button refering to each choice appears below the image?
Related
this is my function that uses google finance api to get news articles.
someapp/views.py
def news(request):
if request.method == 'POST':
url = "https://google-finance4.p.rapidapi.com/ticker/"
querystring = {"t":"ETH-USD","hl":"en","gl":"US"}
headers = {
"X-RapidAPI-Key": "API KEY",
"X-RapidAPI-Host": "google-finance4.p.rapidapi.com"
}
response = requests.request("GET", url, headers=headers, params=querystring)
response.status_code
response.text
response.json()
articles = response.json()['news']
return render(request, 'news.html', {
"article": articles })
else:
return HttpResponse('Error')
this is the html code
<body class="bg-dark">
<div
style="
position: flex;
width: 450px;
align-items: center;
align-content: center;
justify-content: center;
margin: 370px auto;
"
>
<img class ="img-fluid" src="{% load static %} /static/logo.png" "
alt="Crypto Talk"
</div>
<p>**{{ article }}**</p>
</body>
this is the html to the page where the POST request is coming from.
<form
class="form-inline"
method="POST"
action="{{ 'news/' }}"
name="news"
>
<div
class="input-group mb-3"
style="margin: 0 auto; display: flex; width: 450px"
>
{%csrf_token%}
<input
type="text"
class="form-control"
placeholder="Enter Crypto"
name="search"
style="
display: block;
margin: 0 auto;
border-top-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
"
/>
<button
class="btn btn-outline-primary btn-md"
type="submit"
id="button-addon2"
>
Search
</button>
for some reason it takes me to the new html but the page only has the logo. The content from the api I am looking to return is showing up in my terminal with the error "Not Found: /news/requestProvider.js.map"? is there something wrong with how im using Django's templating language or does it have to do with my views? Ultimately I am trying to render the articles found in the 'news' key when using this api and rendering it just like a google search.
Just needed to change the text color! hahaha.
I am using Flask and therefore Jinja2 to dynamically create a web page.
When I use the render_template function the resulting web pages pick up my css styles normally and do as I expect with some strange exceptions.
For example, the following css and html code is working 100% as intended:
CSS:
.intro {
font-family: monospace;
font-size: 24px;
color: #455934;
padding-top: 30px;
padding-right: 50px;
padding-bottom: 5px;
padding-left: 50px;
}
HTML:
<p class ='intro'>
Hello
</p>
However when using a ``Jinja2``` template:
<p class ='intro'>
{{title}}
</p>
The css style for this class is ignored.
This is not true for any other styles in the same css file and template, for reference the whole template looks like this and the styles for div containers, background, etc. work as intended:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='gemuese_style.css') }}">
<title>{{title}}</title>
</head>
<body>
<div class="outer">
<div class="middle">
<div class="inner">
<p class ='intro'>
{{title}}
</p>
<ul>
<li>{{result}}</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Edit:
Some testing has shown me that the style seems to work depending on the variable jinja renders. The template is rendered based on the output of different functions who generally return a list of a string and another list. The string is then used to fill in the {{title}} part where the css is failing.
For some functions it does work but I am not sure why because there is no difference in the return format.
Edit2:
Look at the difference between This rendered template and this one.
I'm using the web2py frame work and this is what i'm trying to achieve;
I have contact details of different places in my DB, the names of these different places are displayed as links in a page, what i want is for the contact details of a place to be displayed in a tooltip when i click on the link name of that place. But that is not happening! What happens is that when i click the name of the place i get tooltips with different contact information of different places stacked on top of each other!
As stated above, what i want is for the contact details of a place to be displayed in a tooltip when i click on the link name of that place., can anyone please assist me get this right.
THE MODEL CODE
db.define_table('services',
Field('service_name', requires=IS_NOT_EMPTY()),
format='%(service_name)s', migrate=False, fake_migrate=True)
db.define_table('company',
Field('logo', 'upload'),
Field('company_name', requires=IS_NOT_EMPTY()),
Field('services', 'reference services'),
#Field('tlamelo', 'reference tlamelo'),
Field('product', 'reference product'),
Field('tel', requires=IS_NOT_EMPTY()),
Field('email', requires=IS_NOT_EMPTY()),
Field('fax', requires=IS_NOT_EMPTY()),
Field('cell', requires=IS_NOT_EMPTY()),
Field('facebook', requires=IS_NOT_EMPTY()),
Field('twitter', requires=IS_NOT_EMPTY()),
Field('website', requires=IS_NOT_EMPTY()),
Field('postal_address', requires=IS_NOT_EMPTY()),
Field('located_at', requires=IS_NOT_EMPTY()), migrate=False, fake_migrate=True)
CSS TOOLTIP CODE
#branch1 {outline:none; position: relative; font-weight: bold;}
#branch1 {text-decoration:none;}
span.contacts1
{
display:inline;
position:absolute;
color:#111;
border:1px solid #000000;
background: #000000;
opacity: 0.9;
color: white;
font-weight: bold;
font-size: small;
border:1px solid #000000;
border-radius: 25px;/*border-radius: 5px 100px 5px;*/
z-index:1;
left: 40px;
display:none;
padding:14px 15px;
margin-top:-56px;
margin-left:70px;
width:500px;
line-height:16px;line-height:20px;
}
CONTROLLER CODE
def companies():
results=db.services(request.args(0))
rslts=db(db.company.services==results.id).select(db.company.ALL, orderby=db.company.company_name)
return locals()
THE VIEW CODE
<script>
$(document).ready(function(){
$('.branch1').click(function(e) {
$(this).each(function(){
$('.contacts1').fadeIn();
e.preventDefault();
});
});
$('img#close').click(function(e)
{
$('.contacts1').fadeOut();
e.preventDefault();
});
});
</script>
<div class="comps">
<span class="companies">COMPANIES (A-F)</span><br /><br />
{{letters=['A', 'B', 'C', 'D', 'E', 'F']
for company in rslts:
if company.company_name[0] in letters:
company.company_name
}}
{{=company.company_name}}<br />
<span class="contacts1">
<img src="{{=URL('static', 'images/close.png')}}" style="width: 50px; position: absolute; top:0px;right:0px;" id="close"/>
<div class="info" id="logo">
<img id="companyLogo" width="140px" src="{{=URL('download',args=company.logo)}}" /><br />
<span style="position: absolute; bottom:0px; left: 10px;">SESOA&trade</span>
</div>
<div class="info" style="padding-left:5px; border-left: solid 1px white;" id="details">
<span class="companyName">{{=company.company_name}}</span>
<hr class="divider" />
<span class="contact" id="cell">TEL: </spanM <strongstyle="color:green;">{{=company.tel}}</strong><br />
<span class="contact" id="cell">EM#IL: </span> <strong style="color:green;">{{=company.email}}</strong><br />
<span class="contact" id="cell">CELL: </span><strong style="color:green;">{{=company.cell}}</strong><br />
<span class="contact" id="fb">Facebook: </span> <strong style="color:green;">{{=company.facebook}}</strong><br />
<span class="contact" id="twit">Twitter: </span> <strong style="color:green;">{{=company.twitter}}</strong><br />
<span class="contact" id="e_mail">WEBSITE: </span> <strong style="color:green;">{{=company.website}}</strong></span><br />
<span class="contact" id="cell">FAX: </span> <strong style="color:green;">{{=company.fax}}</strong><br />
<span class="contact" id="cell">LOCATION: </span> <strong style="color:green;">{{=company.located_at}}</strong><br />
</div>
</span>
{{pass}}
{{pass}}
</div>
Click this link to view the problem first hand Contacts Problem Example
In the click handler, contacts are shown via:
$('.contacts1').fadeIn()
However, in the for loop, each contact gets a "contacts1" class, so the above selector selects all the contacts to be faded in whenever any link is clicked.
Instead, you must add a unique identifier to each contact and select only that contact when its link is clicked.
Try changing:
{{=company.company_name}}<br />
<span class="contacts1">
to:
{{=company.company_name}}<br />
<span class="contacts1" id="{{=company.id}}">
Notice that the company id is added as the unique id for the contacts element, and that same id is added as the data-id attribute of the associated link.
Then, set up the click handler like this:
$('.branch1').click(function(e) {
const id = $(this).data('id'); // Extract the data-id attribute of the link.
$('#' + id).fadeIn(); // Select the contact with that id.
e.preventDefault();
});
Also, note that in an HTML page, each id attribute must be unique, but you re-use the same id values in each loop (i.e., "branch1", "close", "logo"). You even re-use the "cell" id multiple times within a single iteration of the loop. It is not clear you even need all of those id's, but if you do need any of them, make sure they are unique (e.g., something like "{{='branch%s' % company.id}}").
I am using django-easy_pdf to reder pdf for my reports and would like to know how to display a page footer.
In the django-easy_pdf's source code this piece of code is used to display the page number
<div id="footerContent">
{%block page_foot%}
<pdf:pagenumber />
{%endblock%}
</div>
What I would like to know is:
How to display the footer properly
Start with page number 1
As I have copied the code, it does not display as a footer and the page starts with 0
What am I missing?
UPDATE
I tried this code from here but I can't make it work, seems useful though
<html>
<head>
<style>
.footer { position: fixed; bottom: 0px; }
.pagenum:before { content: counter(page); }
</style>
</head>
<body>
<div class="footer">Page: <span class="pagenum"></span></div>
</body>
</html>
UPDATE 2
I now know what I did wrong, I was missing the #page css and that is why It's not working, I only have the #frame footer
The correct CSS:
#page {
size: {{ pagesize }};
margin: 1cm;
#frame footer {
-pdf-frame-content: footerContent;
bottom: 0cm;
margin-left: 18cm;
margin-right: 0cm;
height: 1cm;
}
}
Then just call it normally(the first snippet)
To display footer correctly make sure that in your template in css styles you have:
#frame footer {
-pdf-frame-content: footerContent;
}
-pdf-frame-content should be pointig to id of your footer container.
You can add the next code in your tempate:
{%block page_foot%}
<div style="display: block;margin: 0 auto;text-align: center;">
page: <pdf:pagenumber />
</div>
{%endblock%}
i need to know how to redirect the user in Django views to a certain page after he logs in.
let's say we have 3 types of users and 3 types of pages, i want each type to be directed to a certain page, and in the same time doesn't has the permission to view the other pages.
You can do something like this:
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse
from django.contrib.auth.decorators import login_required
#login_required
def home(request):
return HttpResponseRedirect(
reverse(custom_view,
args=[request.user.username]))
Here, custom_view should be your user specific view. This is assuming you have:
LOGIN_REDIRECT_URL = '/profiles/home'
and you have configured a urlpattern:
(r'^profiles/home', 'myapp.views.home')
You can add a check for account type and redirect to the correct view.
I wrote some similar functionality recently by sub-classing the LoginView provided by django.contrib.auth. Okay, make your first page from the root directory, call it login:
python manage.py startapp login. Make this file exist <projectRoot>/login/templates/registration/login.html Add this code inside said file, it's more or less cut and pasted from bootstrap's login form, but with some standard django template language to bind to the expected AuthenticationForm fields.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Signin to yourWebsite.com</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body class="text-center">
<form class="form-signin" method="post" action="{% url 'login' %}?next=clockin">
{% csrf_token %}
<img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<!--input id="inputEmail" class="form-control" placeholder="Email address" required="True" autofocus="" type="email"-->
{{form.username}}
<label for="id_password" class="sr-only">Password</label>
{{form.password}}
<!--input id="inputPassword" class="form-control" placeholder="Password" required="True" type="password"-->
<div class="checkbox mb-3">
<label>
<input value="remember-me" type="checkbox"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2018</p>
</form>
</body>
</html>
<script>
$("#id_password").attr({
"class":"form-control",
"placeholder":"Password",
"required":"True",
"type":"password",
});
$("#id_username").attr({"class":"form-control",
"placeholder":"Email address",
"required":"True",
"type":"email",
});
</script>
<style>
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
Next, subclass the built in view and override the redirect part. Inside login.views.py, add this:
from django.contrib.auth.views import LoginView
class CustomLoginview(LoginView):
def get_redirect_url(self):
if self.request.user.groups.filter(name="customer").exists():
return 'invoice'
return super().get_redirect_url()
Finally, update urls.py:
from login.views import CustomLoginview
urlpatterns = [
path('', CustomLoginview.as_view(), name='login'),
I'm telling the login page to go to my next app 'invoice' if the user is a customer, otherwise it goes to the default that I specified in the settings file. Obviously you could expound upon the concept for 3 types of users, which is different than routing based on the names of users, not sure how that got 2 upvotes.