I can't seem to find the problem in header.html which is leading to
RecursionError: maximum recursion depth exceeded while calling a Python object
base.html:
{% load static %}
<!DOCTYPE html>
<html>
<body>
{% include 'header.html' %}
{% include 'navbar.html' %}
{% include 'dashboard.html' %}
<div class="container-fluid">
{% block content %}
{% endblock %}
</div>
{% include 'footer.html' %}
</body>
<!-- Bootstrap core JavaScript-->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- Core plugin JavaScript-->
<script src="{% static 'vendor/jquery-easing/jquery.easing.min.js' %}"></script>
<!-- Custom scripts for all pages-->
<script src="{% static 'js/sb-admin-2.min.js' %}"></script>
<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-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</html>
dashboard.html:
{% load static %}
{% extends 'base.html' %}
<head>
<title>:: Welcome to CrmNXT ::</title>
<!-- Custom fonts for this template-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="{% static 'css/sb-admin-2.min.css' %}" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="#">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-address-card"></i>
</div>
<div class="sidebar-brand-text mx-3">Welcome to NexCRM</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-home"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Companies -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-building"></i>
<span>Companies</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!--Nav Item - Modules -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-cog"></i>
<span>Modules</span>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Components:</h6>
<a class="collapse-item" href="buttons.html">Buttons</a>
<a class="collapse-item" href="cards.html">Cards</a>
</div>
</div>
</a>
</li>
<!--Nav Item - Pricing -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-money"></i>
<span>Pricing</span>
</a>
</li>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Begin Page Content -->
<div id="content">
</div>
<!-- End of Main Content -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
{% block script %} {% endblock script %}
<!-- Bootstrap core JavaScript-->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- Core plugin JavaScript-->
<script src="{% static 'vendor/jquery-easing/jquery.easing.min.js' %}"></script>
<!-- Custom scripts for all pages-->
<script src="{% static 'js/sb-admin-2.min.js' %}"></script>
<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-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Date Time Picker JS -->
<script src="{% static 'date-time-phone/jquery-ui.js' %}"></script>
<script src="{% static 'date-time-phone/jquery-ui-timepicker-addon.js' %}"></script>
<script>
$( function() {
// $( "#id_birth_date" ).datetimepicker({ dateFormat: 'yy-mm-dd', maxDate: 0, controlType: 'select'}).attr("autocomplete", "off") ;
$( "#id_birth_date" ).timepicker({ dateFormat: 'yy-mm-dd', maxDate: 0, controlType: 'select'}).attr("autocomplete", "off") ;
// $( "#id_birth_date" ).datepicker({ dateFormat: 'yy-mm-dd' }).attr("autocomplete", "off") ;
});
</script>
<!-- Date Time Picker JS -->
<!-- Phone Mask JS -->
<script src="{% static 'date-time-phone/jquery-input-mask-phone-number.min.js' %}"></script>
<script>
//(xxx) xxx-xxxx format code
$(document).ready(function () {
$('#id_phone_number').usPhoneFormat({
format: '(xxx) xxx-xxxx',
});
});
</script>
</body>
</html>
navbar.html:
{% load static %}
{% extends 'base.html' %}
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="#">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-address-card"></i>
</div>
<div class="sidebar-brand-text mx-3">Welcome to CRMNXT</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="">
<i class="fas fa-fw fa-home"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Companies -->
<li class="nav-item">
<a class="nav-link" href="">
<i class="fas fa-fw fa-building"></i>
<span>Companies</span></a>
</li>
<!-- Nav Item - Contact -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-table"></i>
<span>Modules</span></a>
</li>
<!-- Nav Item - Deals -->
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-user"></i>
<span>Pricing</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider my-0">
footer.html:
{% load static %}
{% extends 'base.html' %}
<!DOCTYPE html>
<html lang="en">
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © XXXX 2019</span>
</div>
</div>
</footer>
<!-- End of Footer -->
header.html:
{% extends 'base.html' %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Search -->
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small"><strong>Welcome,</strong> {{user.username}}</span>
<img class="img-profile rounded-circle" src="{{user.profile.profile_image.url}}">
</a>
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
Change Password
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
Activity log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'login' %}" >
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
<!-- End of Topbar -->
The error that is showing up during template rendering.
Does anyone have a workaround solution for this? Or do I need to increase the recursion limit? And if so, how?
Edit: Forgot to add header.html. Now added in the question.
Your base.html includes header.html, and your header.html extends base.html, causing an infinite loop.
You should choose one or the other. For this case you'd probably want to keep the {% include ... %}.
Related
I am facing issues displaying images in my flask app. below is my code use
This is my main.py
from flask import Flask, render_template, request, session, redirect, flash
from flask_sqlalchemy import SQLAlchemy
from werkzeug.utils import secure_filename
import boto3
local_server = True
app = Flask(__name__)
app.secret_key = 'super-secret-key'
s3 = boto3.client('s3',
aws_access_key_id=os.environ.get('AWS_ACCESS_KEY_ID'),
aws_secret_access_key= os.environ.get('AWS_SECRET_ACCESS_KEY'),
)
BUCKET_NAME='my s3 bucket name'
#app.route("/")
def home():
posts = Posts.query.filter_by().all()
last = math.ceil(len(posts)/int(params['no_of_posts']))
#[0: params['no_of_posts']]
#posts = posts[]
page = request.args.get('page')
if(not str(page).isnumeric()):
page = 1
page= int(page)
posts = posts[(page-1)*int(params['no_of_posts']): (page-1)*int(params['no_of_posts'])+ int(params['no_of_posts'])]
#Pagination Logic
#First
if (page==1):
prev = "#"
next = "/?page="+ str(page+1)
elif(page==last):
prev = "/?page=" + str(page - 1)
next = "#"
else:
prev = "/?page=" + str(page - 1)
next = "/?page=" + str(page + 1)
return render_template('index.html', params=params, posts=posts, prev=prev, next=next)
app.run(debug=True)
this is my html template
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>{{params['blog_name']}}</title>
<!-- Bootstrap core CSS -->
<link href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="{{ url_for('static', filename='vendor/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="{{ url_for('static', filename='css/clean-blog.min.css') }}" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="/">{{params['blog_name']}}</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
{% block body %} {% endblock %}
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="{{params['tw_url']}}" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="{{params['fb_url']}}" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="{{params['gh_url']}}" target="_blank">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright © TheFlaskBlogger 2021</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="{{ url_for('static', filename='vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- Custom scripts for this template -->
<script src="{{ url_for('static', filename='js/clean-blog.min.js') }}"></script>
</body>
</html>
This is one of my page
index.html
{% extends "layout.html" %}
{% block body %}
<!-- Page Header -->
<header class="masthead" style="background-image: url('{{ url_for('static', filename='assets/img/home-bg.jpg') }}')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>{{params['blog_name']}}</h1>
<span class="subheading">{{params['tag_line']}}</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
{% for post in posts %}
<div class="post-preview">
<a href="/post/{{post.slug}}">
<h2 class="post-title">{{ post.title }}
</h2>
</a>
<p class="post-meta">Posted by
Admin
on {{post.date}}</p>
</div>
{{post.content[0:143]}}
<hr>
</li></a>
{% endfor %}
<!-- Pager -->
<div class="clearfix">
<a style="border-radius: 12px;" class="btn btn-primary float-left" href="{{prev}}"> ← Previous</a>
<a style="border-radius: 12px;" class="btn btn-primary float-right" href="{{next}}">Next →</a>
</div>
</div>
</div>
</div>
{% endblock %}
Please help me display the images from my amazon s3 bucket.I tried all the methods but got no success in displaying images from my S3 bucket. Also note my final outcome is to add the flask application to heroku.
I'm trying to create a basic e-commerce site in Django. I have created a products page and when I open the page, my products are not showing up. I'm new to Django and have no idea what to do.
urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index),
path('products', views.products)
]
views.py
from django.shortcuts import render
from products.models import Product
def index(request):
products = Product.objects.all()
return render(request, 'index.html', {'products': products})
def products(request):
return render(request, 'products.html')
index.html file in templates folder
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>{% block title %}{% endblock title %}PyShop</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">PyShop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/products">Products</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>
products.html file in the same templates folder
{% extends 'base.html' %}
{% block content %}
<h1 class="my-2">Products</h1>
<div class="row">
{%for p in products%}
<div class="col">
<div class="card" style="width: 18rem;">
<img src="{{Product.image_url}}" class="card-img-top" alt="{{Product.name}}">
<div class="card-body">
<h5 class="card-title">{{Product.name}}</h5>
<p class="card-text">${{Product.price}}</p>
Add to cart
</div>
</div>
</div>
{%endfor%}
</div>
{% endblock content %}
I also debugged the NameError for my Product model. Now the products are not showing up.
I had encountered this problem in another project as well. Not knowing what to do, I created that project from scratch once more. The problem still continues.
I think your are confusing !
do the following instruction :
1-remove this code
def products(request):
return render(request, 'products.html')
2- in products.html remove
{% extends 'base.html' %}
add this code :
{% extends 'index.html' %}
I think your mistake in for loop check the
products = Product.objects.all()
return render(request, 'index.html', {'products': products}) #products is send to index.html and the the for loop syntax is for name_of_params in para
Your for loop is wrong.
Yours: {%for p in products%}
Solution: {%for product in p %}
Building my first Django app from a tutorial, following the instructions pretty much verbatim but my navbar dropdown menu is not working & im unable to logout or change password.
Here is my base.html file i don't know html i copy this code from tutorial & maybe I'm messing anything please take a look & help me to solve the problem, Thank You :)
<!-- templates/base.html -->
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81i\
uXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<title>{% block title %}Bk - Newspaper App {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="{% url 'home' %}">Bk-Styles-007</a>
{% if user.is_authenticated %}
<ul class="navbar-nav mr-auto">
<li class="nav-item">+ New</li>
</ul>
{% endif %}
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
{% if user.is_authenticated %}
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="userMenu">
<a class="dropdown-item"
href="{% url 'password_change' %}">Change password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">
Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ml-auto">
<a href="{% url 'login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'signup' %}" class="btn btn-primary ml-2">
Sign up</a>
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAKl8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ/6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
**I update to
<li class="nav-item dropdown">
but still facing same problem.
.**
I was not able to reproduce your problem in its entirety, but your li tag in line 20 (right after {% if user.is_authenticated %}) is missing a class from bootstrap called dropdown.
So in line 20 instead of
<li class="nav-item">
Should be
<li class="nav-item dropdown">
If that doesn't fully solve your problem, I suggest you edit your question and add the entire code (maybe you didn't import the Bootstrap Javascript? I'm not able to know with just this code snippet).
EDIT
Ok, since you posted your entire code I found what is wrong with it. As suspected, the javascript code was not being imported correctly, because your SHA hashes from the scripts tag, parameter integrity are invalid. This is a really important feature to guarantee that you're importing the right code from a CDN (not some malicious code). Since you're following a tutorial, you probably got a hash that's no longer valid.
I recommend getting the most up to date version of Bootstrap 4 from their site (at the time of writing, it's 4.5). Replace your imports by these and it should work. To save you some time, I've copied the new info:
CSS:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
JS:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
If you really need the 4.1.3 version of Bootstrap, you can find it in this site, but my guess is that you don't. Prefer the most up to date version.
this is how my base.html looks like,everything was working fine until i did some changes adding jquery
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type ="text/css" href="{% static 'pmmvyapp/main.css' %}">
<link href="{% static 'js/jquery.js' %}" rel="stylesheet">
{% if title %}
<title> PMMVY-{{ title }}</title>
{% else %}
<title>PMMVY</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"><img src="{% static 'images/left-logo.png' %}" width="83" height="89" class='d-inline-block' alt=""/>
<span style="color:white"> Ministry of Women & Child Development | GoI</span>
</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">
{% if user.is_authenticated %}
<a class="btn btn-primary mr-4" href="{% url 'aganwadi' %}">Aganwadi</a>
<a class="btn btn-primary mr-4" href="{% url 'applyonline' %}">Apply online</a>
{% else %}
<div class="navbar-nav mr-auto">
<a class="navbar-brand mr-4"><img src="{% static 'images/emblem-dark.png' %}" width="60" height="80" class='d-inline-block' alt=""/> <span style="color:white" >Pradhan Mantri Matru Vandana Yojana</span> </a>
</div>
{% endif %}
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if user.is_authenticated %}
<div class="navbar-nav mr-auto">
<a class="btn btn-primary mr-4" href="{% url 'admin:index' %}"> Admin site </a>
<a class="btn btn-primary mr-4" href="{% url 'logout' %}">Logout</a>
</div>
{% else %}
<div class="navbar-nav mr-auto">
<a class="navbar-brand mr-4" href="{% url 'login' %}"><img src="{% static 'images/pm.png' %}" width="65" height="70" class='d-inline-block' alt=""/> <span class="btn btn-primary" style="color:black mr-4" >Login</span> </a>
</div>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
<!--mainsec-->
<main role="main" class="container">
<div>
{% if messages %}
{% for message in messages%}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
</div>
<div class="row">
{% block content %}{% endblock %}
</div>
</main>
<!--end mainsec-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="{% static 'js/custom.js' %}"></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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</body>
</html>
this is how my applyonline.html looks like
<body ng-app="">
{% extends "pmmvyapp/base.html" %}
{% load crispy_forms_tags %}
{% load static %}
{% block content%}
<div class="col-md-8">
<form method="post" action="/personal_detail/" enctype="multipart/form-data">
<div class="group">
<div class="hide" id="q1">
</div>
</div>
</div>
<div class="hide" id="q2">two</div>
<div class="hide" id="q3">three</div>
<div class="hide" id="q4">four</div>
</div>
<div style="margin-bottom:10px ">
<button id="next">Next</button> <button id="prev">Previous</button>
</div>
<button type="submit" class="btn btn-primary" style="margin-bottom:10px ">Submit</button>
</form>
</div>
<style>
.hide
{
display : none;
}
</style>
{% endblock %}
</body>
my settings.py
INSTALLED_APPS = [
'jquery',
'captcha',
'users.apps.UsersConfig',
'pmmvyapp.apps.PmmvyappConfig',
'crispy_forms',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
my models.py where I am returning either of the one names
class Personal_Detail(models.Model):
beneficiary_adhaar_name=models.TextField(blank=True, null=True)
adhaarno=models.IntegerField(blank=True, null=True)
adhaarcopy = models.FileField(upload_to='adhaar/')
idcard=models.TextField(blank=True, null=True)
adhaar_eid=models.IntegerField(blank=True,null=True)
beneficiary_id_name=models.TextField(blank=True, null=True)
idno=models.IntegerField(blank=True, null=True)
idcopy=models.FileField(upload_to='identitycard/')
def __str__(self):
return self.beneficiary_adhaar_name or self.beneficiary_id_name
my views.py
#login_required
def ApplyOnline(request):
return render(request,'users/applyonline.html')
#login_required
def personal_detail(request):
# ShowHideExample = request.POST.get('showHideExample',False)
beneficiary_adhaar_name=request.POST.get('beneficiary_adhaar_name')
adhaarno=request.POST.get('adhaarno')
adhaarcopy = request.FILES.get('adhaarcopy')
idcard=request.POST.get('idcard')
adhaar_eid=request.POST.get('adhaar_eid')
beneficiary_id_name=request.POST.get('beneficiary_id_name')
idno=request.POST.get('idno')
idcopy = request.FILES.get('idcopy')
apply_online = Personal_Detail(beneficiary_adhaar_name=beneficiary_adhaar_name,adhaarno=adhaarno,adhaarcopy=adhaarcopy,
idcard=idcard,adhaar_eid=adhaar_eid,beneficiary_id_name=beneficiary_id_name,idno=idno,idcopy=idcopy)
apply_online.save()
return render(request,'users/applyonline.html')
I don't know the problem that is causing this it was working fine when suddenly i did some changes with query to create a multi step form and when checked the database I was getting some null entries and when i clicked or tried to delete them I got error.I've included the image of null entries i was getting.
Basically your Model's __str__ method is returning None. Means both of the field's value is None. You need to return a string value from that method. For example:
class Personal_Detail(models.Model):
# rest of the code
def __str__(self):
return self.beneficiary_adhaar_name or self.beneficiary_id_name or str(self.pk)
`
.testimonials {background: url('./images/s8.png'); padding:55px 0; overflow:hidden; }
`Am using django 2.1 having a problem in displaying a background image which is styled in my css folder
I have tried several ways like
.testimonials {background: url("/static/images/s8.png"); padding:55px 0; overflow:hidden; }
and having an inline customization both didn't work please help
<div class="testimonials" style="background: url({% static "images/s8.jpg" %})">
Using a background image in CSS file doesn't require a static block. Just make sure you have path correctly matched with your folders. Use ./ to go back in path mapping.
css/base.css
images/slide1Back.png
My CSS file was in CSS folder and images were in the images folder. So I used this.
background-image: url('./images/slide1Back.png');
First of all, make sure you added this line to your html file:
{% load staticfiles %}
then put this to your settings.py:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
now everythings work like what!
UPDATE
Here is my profile.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Profile</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<!-- SUBHEADER -->
<div id="subheader" class="about">
<div class="subheader-text">
<h1>A unique cloud hosting provider</h1>
<h2>Our efforts and focus are always directed to our clients and their needs</h2>
</div>
</div>
<!-- END OF SUBHEADER -->
</body>
</html>
and my style.css
#subheader.about {
background: url("../images/s8.jpg") center center no-repeat;
padding: 100px 25px;
}
#subheader.about:after {
background: rgba(34, 43, 50, .9);
bottom: 0px;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
please attention, i used ../ instead of ./
and this is my tree:
tree
and this is result:
result view
Am using this template here as about.html
{% extends "base.html" %}
{% load static %}
{% block Content %}
<!-- SUBHEADER -->
<div id="subheader" class="about">
<div class="subheader-text">
<h1>A unique cloud hosting provider</h1>
<h2>Our efforts and focus are always directed to our clients and their needs</h2>
</div>
</div>
<!-- END OF SUBHEADER -->
<!-- DESCRIPTION -->
<div class="about-descr">
<div class="row">
<div class="col-sm-12 col-md-10 center-block">
<h3>WHAT ARE WE ALL ABOUT?</h3>
<div class="titleborder centered">
<div class="titleborder_left"></div>
<div class="titleborder_sign"></div>
<div class="titleborder_right"></div>
</div>
</div>
</div>
<div class="row spacing-25">
<div class="col-sm-12 col-md-7">
<img src="images/about-us.jpg" alt=""/>
</div>
<div class="col-sm-12 col-md-5">
<p class="topspacing">We work hard to provide Maelezo mazuri huwajenga wengine kutanikoni. (Ro 14:19) Pia, yanawanufaisha wale wanaotoa maelezo. (Met 15:23, 28) Kwa hiyo, tunapaswa kujitahidi kutoa maelezo angalau mara moja kila mkutano. Bila shaka, hatutachaguliwa kutoa maelezo kila wakati tunapoinua mkono. Kwa hiyo, ni muhimu kutayarisha majibu kadhaa. </p>
<p>Maelezo mazuri huwajenga wengine kutanikoni. (Ro 14:19) Pia, yanawanufaisha wale wanaotoa maelezo. (Met 15:23, 28) Kwa hiyo, tunapaswa kujitahidi kutoa maelezo angalau mara moja kila mkutano. Bila shaka, hatutachaguliwa kutoa maelezo kila wakati tunapoinua mkono. Kwa hiyo, ni muhimu kutayarisha majibu kadhaa..</p>
</div>
</div>
</div>
<!-- END OF DESCRIPTION -->
<!-- ABOUT ICONS -->
<div class="about-icons">
<div class="row">
<div class="col-sm-3"><img src="images/icon17.png" alt=""/><p>CHOOSE</p></div>
<div class="col-sm-3"><img src="images/icon18.png" alt=""/><p>SCALE</p></div>
<div class="col-sm-3"><img src="images/icon19.png" alt=""/><p>LAUNCH</p></div>
<div class="col-sm-3"><img src="images/icon20.png" alt=""/><p>USE</p></div>
</div>
</div>
<!-- END OF ABOUT ICONS -->
{% endblock Content%}
and this is my css
======================== */
#subheader.about {background: url("../images/s8.jpg") center center no-repeat; padding:100px 25px;}
#subheader.about:after { background: rgba(34,43,50,.9); bottom: 0px; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; }
Can tell where is the mistake or am missing something here
here is the path to image projects/djangoprojects/static/images/s8.jpg
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content=" ">
<meta name="keywords" content="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>| Web | Software </title>
<link rel="shortcut icon" href="{% static "images/favicon.png" %}" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Bootstrap & Styles -->
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/bootstrap-theme.min.css" %}" rel="stylesheet">
<link href="{% static "css/block_grid_bootstrap.css" %}" rel="stylesheet">
<link rel="stylesheet" href="{% static "css/owl.carousel.css" %}">
<link rel="stylesheet" href="{% static "css/owl.theme.css" %}">
<link rel="stylesheet" href="{% static "css/animate-custom.css" %}">
<link rel="stylesheet" href="{% static "css/flexslider.css" %}">
<link rel="stylesheet" href="{% static "css/font-awesome.min.css" %}">
<link rel="stylesheet" href="{% static "css/slicknav.min.css" %}">
<link href="{% static "css/style.css" %}" rel="stylesheet">
</head>
<body>
<!-- TOP NAV -->
<div class="topmenu">
<div class="row">
<div class="col-sm-3">
<ul class="top left">
<li><i class="fa fa-phone"></i>+666666666 Call us</li>
</ul>
</div>
<div class="col-sm-9">
<ul class="topright">
<li><i class="fa fa-unlock-alt"></i> CLIENT AREA</li>
<li><i class="fa fa-commenting-o"></i> LIVE CHAT</li>
<li><i class="fa fa-hand-pointer-o"></i> Support</li>
</ul>
</div>
</div>
</div>
<!-- END OF TOP NAV -->
<!-- HEADER -->
<div class="header">
<div class="row">
<div class="col-sm-3">
<div class="logo">
<a href="/"><img src="{% static "images/logo.png" %}" alt="" />
</a>
</div>
</div>
<div class="col-sm-9">
<nav id="desktop-menu">
<ul class="sf-menu" id="navigation">
<li class="current">Home
<ul>
<li>Billing</li>
<li>Web Design</li>
</ul>
</li>
<li>Hosting
<ul>
<li>Shared Hosting</li>
<li>Cloud VPS</li>
</ul>
</li>
<li>Domains</li>
<li>Pages
<ul>
<li>About</li>
<li>FAQ</li>
<li>Datacenter</li>
</ul>
</li>
<li>Blog
<ul>
<li>hosting tips</li>
<li>Facebook</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- END OF HEADER -->
{% block Content %}
{% endblock Content %}
<!-- FOOTER -->
<div class="footer">
<div class="row">
<div class="col-sm-3">
<h4>CLOUD HOSTING</h4>
<ul>
<li>cPanel Hosting</li>
<li>Shared Hosting</li>
<li>Cloud VPS</li>
<li>WordPress Hosting</li>
</ul>
</div>
<div class="col-sm-3">
<h4>HOSTING FOR APPS</h4>
<ul>
<li>WordPress Hosting</li>
<li>Joomla Hosting</li>
<li>Drupal Hosting</li>
<li>Magento Hosting</li>
</ul>
</div>
<div class="col-sm-3">
<h4>COMPANY</h4>
<ul>
<li>About Us</li>
<li>Privacy Policy</li>
<li>Acceptable Usage Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="col-sm-3">
<h4>NEWSLETTER SIGNUP</h4>
<div id="mc_embed_signup">
<form class="form-inline validate material" action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input id="mce-EMAIL" type="email" name="EMAIL" placeholder="E-mail" required>
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_b5638e105dac814ad84960d90_9345afa0aa" tabindex="-1" value="">
</div>
<input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="mtr-btn button-blue">
</form>
</div>
</div>
</div>
</div>
<!-- END FOOTER -->
<!-- SOCIAL & COPYRIGHT -->
<div class="social">
<div class="row">
<div class="col-sm-12">
<ul class="social-links">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-pinterest-p"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-github-alt"></i></li>
</ul>
<p class="text-center">Copyright© . All rights reserved.</p>
</div>
</div>
</div>
<!-- END OF SOCIAL & COPYRIGHT -->
<!-- LOGIN MODAL -->
<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="LoginModal">
<div class="modal-dialog" role="document">
<form method="post" action="#" class="material">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><i class="fa fa-lock"></i>LOGIN TO YOUR ACCOUNT</h4>
</div>
<div class="modal-body">
<input type="text" name="username" placeholder="E-mail Address">
<input type="password" name="password" placeholder="Password">
<button type="submit" class="mtr-btn button-fab">LOGIN</button>
</div>
</div>
</form>
</div>
</div>
<!-- END OF LOGIN MODAL -->
<i class="fa fa-angle-up"></i>
<script src="{% static "js/jquery.min.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
<script src="{% static "js/jquery.flexslider-min.js" %}"></script>
<script src="{% static "js/jquery.easing.1.3.js" %}"></script>
<script src="{% static "js/hoverIntent.js" %}"></script>
<script src="{% static "js/superfish.min.js" %}"></script>
<script src="{% static "js/owl.carousel.js" %}"></script>
<script src="{% static "js/ripple-effect.js" %}"></script>
<script src="{% static "js/wow.min.js" %}"></script>
<script src="{% static "js/jquery.form.min.js" %}"></script>
<script src="{% static "js/jquery.slicknav.min.js" %}"></script>
<script src="{% static "js/retina.min.js" %}"></script>
<script src="{% static "js/custom.js" %}"></script>
</body>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5933bc17b3d02e11ecc6824e/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</html>