In a Django project, I have a side bar that is not rendering in the correct place. Instead of coming up on the right hand side of the content, as it does for the other pages that have similar content, the side bar in this case is at the very bottom. I cannot figure out how to move it, and have tried various things in the base.html and moving around the Django templating language block content.
Rendering the template (register.html) looks like this:
It should however look like this, as per the tutorial:
Relevant part of the base.html
<!--this is django templating language-->
<link rel="stylesheet" href="{% static 'worldguestbook\main2.css' %}"/>
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/">FakeBook Newsfeed</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{% url 'socialmedia-home' %}">Home</a>
<a class="nav-item nav-link" href="{% url 'socialmedia-about' %}">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="{% url 'socialmedia-login' %}">Login</a>
<a class="nav-item nav-link" href="#">Register</a>
</div>
</div>
</div>
</nav>
</header>
register.html
{% extends "socialmedia/base.html" %}
{% block content %}
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Hello: Register today!</legend>
{{form.as_p}}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Register</button>
</form>
<div class="border-top pt-3">
<small class="text-muted">Signed up already? <a class="ml-2" href="#">Login</a> here</small>
</div>
{% endblock content %}
views.py
#USERS (register) view.py
from django.shortcuts import render
from django.contrib.auth.forms import UserCreationForm
# Create your views here.
def register(request):
form = UserCreationForm()
return render(request, 'users/register.html',{'form':form})
Please note that the main2.css style sheet is referenced in the base.html and works fine on all the other pages except for this one. In the other pages the side bar renders correctly on the right hand side of the page.
The problem was a missing div, that compeltely escaped my attention.
The register.html page can be re-written as the below. Note the divs, one of which was missing. I also sorted out the indentation which helps.
{% extends "socialmedia/base.html" %}
{% block content %}
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Hello: Register today!</legend>
{{form.as_p}}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Register</button>
</div>
</form>
<div class="border-top pt-3">
<small class="text-muted">
Signed up already? <a class="ml-2" href="#">Login</a>
</small>
</div>
</div>
{% endblock content %}
Related
I started to watch Corey Schafer's django website tutorial and everything was going great until now. unlike in the video after registering site doesn't sends me to home page. It does nothing. All I suspect is the get method because it is not the color it supposed to be in VSC. Any ideas why :(
and also .method functions seems to be not working it is white in VSC
user_views.py:
from django.contrib import messages
from django.contrib.auth.forms import UserCreationForm
from django.shortcuts import redirect, render
def register(request):
if request.method =='POST':
form = UserCreationForm(request.POST)
if form.is_valid():
username=form.cleaned_data.get('username')
messages.success(request,f'Account Created for {username}')
return redirect("blog-home")
else:
form=UserCreationForm()
return render(request,'users/register.html',{'form':form})
here is the urls:
from django.contrib import admin
from django.urls import path, include
from users import views as user_views
urlpatterns = [
path('admin/', admin.site.urls),
path("", include('Blog.urls')),
path("register/",user_views.register,name="register")
]
Blog.urls:
from django.urls import path
from . import views
urlpatterns= [
path("",views.Home,name="blog-home"),
path("about/",views.About, name="blog-about"),
]
templates:
{% extends "Blog/base.html" %}
{% block content %}
<div class='content-section'>
<form method='POST'>
{% csrf_token %}
<fieldset class="form_group">
<legend class="border-bottom mb-4">Join Today</legend>
{{ form.as_p }}
</fieldset>
<div class="form-group">
<button class="btn btn-outlline-info" type="submit">
Sign Up
</button>
</div>
</form>
<div class="boder-top pt-3">
<small class="text-muted">
Already Have An Account? <a class="ml-2" href="#"> Sign In </a>
</small>
</div>
</div>
{% endblock content %
base template:
{% load static %}
<!DOCTYPE html >
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'Blog/main.css' %}">
{% if title %}
<title> {{title}} </title>
{% else %}
<title> Django Project </title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="{%url 'blog-home'%}">Django Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{%url 'blog-home'%}">Home</a>
<a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Login</a>
<a class="nav-item nav-link" href="{%url 'register' %}">Register</a>
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="Alert alert-{{ message.tags}}">
{{message}} </div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
People who had a problem with PATH variables before listen me carefully this might save you a lot of time, Although I still don't know why and how. There is a django_settings module which is not present anywhere or maybe I couldn't find the exact folder but however this module can be set to your projects setting module that fixes the problem:
set DJANGO_SETTINGS_MODULE=mysite.settings
django-admin runserver
from the terminal, this sets your path of settings I guess
I cannot figure out how to use Boostrap Tabs, when block content is needed and I am unable to make sue of the href in tab li a item. See below for any ideas. thanks for any help.
When you click on the below, it changes the tabs as expected, however, how do you incorporate django views? for example when the email tab is clicked, show the tab view for {% url 'account_email' %} in the content pane?
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-lg-7">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-email-tab" data-toggle="tab" href="#nav-email" role="tab" aria-controls="nav-email" aria-selected="true">E-mail</a>
<a class="nav-item nav-link" id="nav-password-tab" data-toggle="tab" href="#nav-password" role="tab" aria-controls="nav-password" aria-selected="false">Password</a>
<a class="nav-item nav-link" id="nav-connect-tab" data-toggle="tab" href="#nav-connect" role="tab" aria-controls="nav-connect" aria-selected="false">Connect</a>
</div>
</nav>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="container mt-5 text-center mx-auto">
<div class="card p-5">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-email" role="tabpanel" aria-labelledby="nav-email-tab">
{% block email_content %}{% endblock %}
</div>
<div class="tab-pane fade" id="nav-password" role="tabpanel" aria-labelledby="nav-password-tab">
{% block password_content %}{% endblock %}
</div>
<div class="tab-pane fade" id="nav-connect" role="tabpanel" aria-labelledby="nav-connect-tab">
{% block connect_content %}{% endblock %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
For this case, you have 2 options:
Load the whole page of {% url 'account_email' %} into a iframe, and display that iframe in the mentioned tab
put the template of {% url 'account_email' %} into an independent HTML file that can be included into the html section of this tab, using {% include "path to the html file" %}, and of course this HTMl template will use the same context as the current view, meaning you will have to send all the context data from the view of {% url 'account_email' %} into this view.
Remember that Django template render everything FROM THE SERVER SIDE, so everything end-user sees are pre-rendered before. Unless you use Ajax here.
I ended up completing the solution with a much more simple approach using request.path to set the appropriate tag active, then just use the tab href to directly reference the view for that tab.
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-lg-7">
<nav>
<div class="nav nav-tabs" id="nav-tab">
<a class="nav-item nav-link {% if 'accounts/email' in request.path %}active{% endif %}" id="nav-email-tab" href="{% url 'account_email' %}" aria-selected="true">E-mail</a>
<a class="nav-item nav-link {% if 'accounts/password/change' in request.path %}active{% endif %}" id="nav-password-tab" href="{% url 'account_change_password' %}" aria-selected="false">Password</a>
<a class="nav-item nav-link {% if 'accounts/social/connections' in request.path %}active{% endif %}" id="nav-connect-tab" href="{% url 'socialaccount_connections' %}" aria-selected="false">Connect</a>
</div>
</nav>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="container mt-5 text-center mx-auto">
<div class="card p-5">
{% block base_content %}
{% endblock %}
</div>
</div>
</div>
</div>
</div>
I have a django project that includes a popup modal. The modal has tabs as links. When the user clicks on one of the tabs, it must perform a function and retrieve data from the database.
The problem is that once the user clicked on the tab nothing happened, and the function isn't initialized.
urls.py
path("events/<int:id>/", getEvents, name = "getEvents"),
views.py
def getEvents(request,id):
q1 = cursor.execute('SELECT Person_.ID FROM Person_ WHERE Person_.ID = {0}'.format(id))
print('q1==>',q1)
qresult = q1.fetchone()
print("qresult==>",qresult)
print("query is not empty!")
eventQ = cursor.execute('SELECT Person_.ID, Person_.Full_Name, Events.ID, Events.Event_Title, Events.Event_Details, Links.document_id from Person_, Events, Links where ( Person_.ID = {0}) and (Person_.ID = Links.A_Person or Person_.ID = Links.B_Person) and (Events.ID = Links.A_Event or Events.ID = Links.B_Event) ORDER BY Events.ID DESC '.format(id))
resultEvents = eventQ.fetchall()
return render(request,'pictureCard.html',{
"resultEvents":resultEvents,
"qresult":qresult,
})
pictureCrads.html
<!-- Popup Modal -->
{% for obj in object_list %}
<div id="popModel{{obj.0}}" class="modal fade modal-rtl" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header Modal-Pic">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{ obj.1 }}</h4>
<img src="{% static '/img/card/1.png'%}"/>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact{{ obj.0 }}" role="tab" aria-controls="contact" aria-selected="false">contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" id="event-tab" data-toggle="tab" href="{% url 'getEvents' obj.0 %}" role="tab" aria-controls="event" aria-selected="false">Events</a>
</li>
<li class="nav-item mr-auto btn-warning">
<a class="nav-link text-dark" id="contact-tab" data-toggle="tab" href="#picture" role="tab" aria-controls="contact" aria-selected="false">Picture</a>
</li>
</ul>
<div class="modal-body tab-content" id="myTabContent">
<div class="tab-pane fade" id="contact{{ obj.0 }}" role="tabpanel" aria-labelledby="contact-tab">{{ obj.9 }}</div>
{% for event in resultEvents %}
<div class="tab-pane fade" id="event{{ obj.0 }}" role="tabpanel" aria-labelledby="event-tab">
<button class="btn btn-primary" > events</button>
{{ event.2 }}
</div>
{% endfor %}
<div class="tab-pane fade" id="picture" role="tabpanel" aria-labelledby="contact-tab">
<a class="" href="#"><img class="" src="{% static '/img/card/1.png'%}"/></a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
......
<footer class="card-footer card-footer-buttom text-center bg-info">
<form method="GET" action="{% url 'getEvents' obj.0 %}">
detais
</form>
</footer>
Probably django does not know {% for obj in object_list %}. Because you are sending 2 variables which are resultEvents and qresult, but your html file is looking for 'object_list' dictionary or list. This might be the problem.
Hope this helps,
I am learning django-comments-xtd, when I click on the Like button, it will jump to the new page.
How do I make this new page popup on the current page in a modal way?
Thank you.
/home/web/venv/lib/python3.7/site-packages/django_comments_xtd/templates/includes/django_comments_xtd content:
{% if allow_feedback %}
<span class="small">
{% if show_feedback and item.likedit_users %}
<a class="badge badge-primary text-white cfb-counter" data-tooltip="{{ item.likedit_users|join:' , ' }}">
{{ item.likedit_users|length }}</a>
{% endif %}
<a href="{% url 'comments-xtd-like' item.comment.pk %}"
class="{% if not item.likedit %}like{% endif %}">
<i class="thumbs up outline icon"></i></a>
<span class="text-muted"></span>
{% if show_feedback and item.dislikedit_users %}
<a class="badge badge-primary text-white cfb-counter" data-tooltip="{{ item.dislikedit_users|join:' , ' }}">
{{ item.dislikedit_users|length }}</a>
{% endif %}
<a href="{% url 'comments-xtd-dislike' item.comment.pk %}"
class="{% if not item.dislikedit %}dislike{% endif %}">
<i class="thumbs down outline icon"></i></a>
</span>
{% endif %}
The like button is pointing to a link:
<a href="{% url 'comments-xtd-like' item.comment.pk %}"
class="{% if not item.likedit %}like{% endif %}">
<i class="thumbs up outline icon"></i></a>
You can use simple Bootstrap Modal for the same.
Example :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have been having this problem for 2 weeks now I can't seem to solve it.
I have a social website where user's can upload their resumes for recruiters to see.
And when I access some user's profile, the Navbar acts as if I am logged in, which I am not.
I tried fixing this issue by using get_queryset() ,it worked but I couldn't manage to display user's profile data.
so I stuck with get().
Here's a visual explanation:
As you can see the navbar says Home/Login/Signin
Now if I access John Doe's Profile, the navbar will switch to Home/Profile/Logout:
Here's my code;
views.py:
class HomeProfile(ListView):
"Di splays all active users in db"
template_name = 'profile/home_profile.html'
queryset = MyModel.objects.filter(is_active=True)
class Get_Profile(DetailView):
"fetches user's profile"
def get(self, request, pk):
user = MyModel.objects.get(pk=pk)
return render(request, 'profile/profile.html', {'user':user})
urls.py
urlpatterns = [
path('homepage/profiles/', user_view.HomeProfile.as_view(), name='homepage'),
path('homepage/profile/<int:pk>/', user_view.Get_Profile.as_view(), name='user-profile'),
]
base_test.html
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="{% url 'home' %}">Navbar</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="{% url 'homepage' %}">Home<span class="sr-only">(current)</span></a>
</li>
{% if not user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'signup' %}">Sign Up</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Log Out</a>
</li>
{% endif %}
</ul>
</div>
</nav>
home_profile.html
<!-- this is the home template that displays all active users -->
{% extends 'base_test.html' %}
{% block title %} My Site | Profiles {% endblock title %}
{% block content %}
<div class="card-columns text-center padding">
{% for user in mymodel_list %}
<div class="card">
<img class="rounded-circle" src="{{user.profile.image.url}}" width=150 height=150>
<div class="card-body">
<h5 class="card-title">Full name : {{user.get_full_name}}</h5>
<p class="crad-text">Occupation/job : {{user.profile.occupation}}</p>
<a type="button" href="{% url 'user-profile' user.pk %}" style="color:whitesmoke;" class="btn btn-primary btn-sm">Profile</a>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
{% block footer %}
{% endblock footer %}
profile.html
<!-- user profile template -->
{% extends 'base_test.html' %}
{% load custom_tags %}
{% block title %} My Site | {{user.get_full_name}} {% endblock title %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-lg-8 order-lg-2 padding">
<div class="tab-content">
<div class="tab-pane active" id="profile">
<div class="row">
<div class="col-lg-12">
<h6><strong>About</strong></h6>
<p>
{{user.profile.bio}}
</p>
<hr>
</div>
<div class="col-lg-12">
<h6><strong>Skills</strong></h6>
{% for skill in user.profile.skills|split:',' %}
<span class="badge badge-primary">{{skill}}</span>
{% endfor %}
<hr>
<h6><strong>Hobbies</strong></h6>
<p>
{% for hobbie in user.profile.hobbies|split:',' %}
<span class="badge badge-success">{{hobbie}}</span>
{% endfor %}
</p>
<hr>
</div>
<!-- removes the social part -->
</div>
</div>
</div>
</div>
<div class="col-lg-4 order-lg-1 padding">
<h1 class="mb-3 text-center">{{user.get_full_name}}</h1>
<hr>
<img src="{{user.profile.image.url}}" class="mx-auto img-fluid rounded-circle d-block" alt="avatar" width=150><br>
<div class="text-center">
<h4>{{user.profile.school}}</h4>
<p><strong>Hometown :</strong> {{ user.profile.hometown}}</p>
<p><strong>Current City:</strong> {{user.profile.location}}<p>
<p><strong>Occupation/Job:</strong> {{user.profile.occupation}}<p><br>
<hr>
<button type="button" class="btn btn-outline-success btn-md">View CV</button>
</div>
</div>
</div>
</div>
{% endblock content %}
{% block footer %}
{% endblock footer %}
I don't know What is causing this strange behaviour!!
Actually, you are mixing up with request.user and your user object for resume. You should change the context variable name from user to something else. for example:
class Get_Profile(DetailView):
"fetches user's profile"
def get(self, request, pk):
user = MyModel.objects.get(pk=pk)
return render(request, 'profile/profile.html', {'profile':user}) # <-- Here
You've used the same variable name, user, for the user whose profile you are viewing as for the one who is actually using the site. You need to pick another name.
(Also, unrelated, but you don't need to - and shouldn't - define the get method in your detail view.)