SocketIO and Flask not displaying messages - python

I am having some trouble using JQquery with socketio. I want the messages that are typed into the text box by the user to appear displayed as a list at the beginning of the the chat page, but am somehow failing at making that happen.
Does anybody know where my mistake is?
Relevant flask code:
from flask import Flask, render_template, request, flash, session, redirect
from flask_session import Session
from flask_socketio import SocketIO, send, emit
app = Flask(__name__)
app.static_folder = "static"
app.secret_key = "My_secret_key"
app.config["SECRET KEY"] = "another_secret!"
app.config["SESSION_TYPE"] = "filesystem"
Session(app)
socketio = SocketIO(app)
#app.route('/')
def login_form():
return render_template('index.html')
#app.route('/chat-page', methods=["POST"])
def chat_page():
username = request.form.get("user_name")
session["user"] = username
return render_template('chat-page.html', Uname=username)
#app.route("/logout")
def logout():
session.pop("user", None)
flash("You have been logged out!")
return redirect("/")
# function to send messages to the entire group
#socketio.on("message")
def handle_message(msg):
print("message: " + msg)
send(msg, broadcast=True)
if __name__ == "__main__":
socketio.run(app)
And relevant html page with jquery:
html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Flask Lan Chat App</title>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='styles.css')}}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body style="background-image: radial-gradient(circle, #4EFECD, #000000);">
<section class="hero">
<div class="hero-container">
<div class="hero-area">
<div class="hero-text">
<h1> Hello {{Uname}}! </h1>
</div>
</div>
</div>
</section>
<div class="message_container">
<div class="d-inline-flex p-2">
<div class="card" style="width: 30rem;">
<div class="card-body">
<ul id="messages">
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
</ul>
</div>
</div>
</div>
</div>
<!-- styling the form and buttons -->
<div class="chat_page_container">
<div class="d-inline-flex p-2">
<div class="input-group">
<span class="input-group-text">What say you?</span>
<textarea id="MyMessage" class="form-control" aria-label="With textarea"></textarea>
</div>
<div class="chat_page_container">
<div class="d-inline-flex p-2">
<button type="button" id="SendButton"class="btn btn-primary">Say it!</button>
</div>
</div>
<div class="chat_page_container">
<a href="/logout">
<button type="button" class="btn btn-warning">Logout!</button>
</a>
</div>
</div>
</div>
<!-- end of styling the form and buttons -->
</body>
<footer class="bg-dark text-center text-lg-start" style="position: absolute; bottom: 0; width: 100%;">
<!-- Copyright -->
<div class="text-center p-3" style="background-color: #1c1d25; color: white;">
© 2022 Copyright:
<a class="text-light" href="https://beatrix-droid.github.io/">Beatrice Federici</a>
</div>
<!-- Copyright -->
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
<script type=text/javascript">
socket.on("connect", function(){
socket.send("User has connected");
});
socket.on("message", function(msg) {
$("#messages").append("<li>" + msg + "</li>");
});
//sending a message and clearing the input box once the message has been sent
$("#SendButton").on("click", function() {
socket.send($("#MyMessage").val());
$("#MyMessage").val("");
});
});
</script>
</html>
Any help on the matter would be much appreciated!!


I can tell you that your code actually works.
You should watch out for typos and adopt code examples completely. I organized your code a bit and added the missing parts.
Have fun.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flask Lan Chat App</title>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='styles.css')}}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body style="background-image: radial-gradient(circle, #4EFECD, #000000);">
<section class="hero">
<div class="hero-container">
<div class="hero-area">
<div class="hero-text">
<h1>Hello {{Uname}}!</h1>
</div>
</div>
</div>
</section>
<div class="message_container">
<div class="d-inline-flex p-2">
<div class="card" style="width: 30rem;">
<div class="card-body">
<ul id="messages">
</ul>
</div>
</div>
</div>
</div>
<div class="chat_page_container">
<div class="d-inline-flex p-2">
<div class="input-group">
<span class="input-group-text">What say you?</span>
<textarea id="MyMessage" class="form-control" aria-label="With textarea"></textarea>
</div>
<div class="chat_page_container">
<div class="d-inline-flex p-2">
<button type="button" id="SendButton"class="btn btn-primary">Say it!</button>
</div>
</div>
<div class="chat_page_container">
<a href="/logout">
<button type="button" class="btn btn-warning">Logout!</button>
</a>
</div>
</div>
</div>
<footer class="bg-dark text-center text-lg-start" style="position: absolute; bottom: 0; width: 100%;">
<div class="text-center p-3" style="background-color: #1c1d25; color: white;">
© 2022 Copyright:
<a class="text-light" href="https://beatrix-droid.github.io/">Beatrice Federici</a>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.socket.io/4.4.1/socket.io.min.js" integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H" crossorigin="anonymous"></script>
<script type="text/javascript">
var socket = io();
socket.on("connect", function(){
socket.send("User has connected");
});
socket.on("message", function(msg) {
$("#messages").append("<li>" + msg + "</li>");
});
$("#SendButton").on("click", function() {
socket.send($("#MyMessage").val());
$("#MyMessage").val("");
});
</script>
</body>
</html>

Related

How to load background image from style.css in django framework

`
.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>

Bad Request The browser (or proxy) sent a request that this server could not understand

I have tried filling the add.html and when I click send I get the error above.
Bad Request
The browser (or proxy) sent a request that this server could not understand.
My app.py is as below.
from flask import Flask, render_template, url_for, redirect, request
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
import requests
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql+psycopg2://user:mypassword#localhost/mydb'
db=SQLAlchemy(app)
# class User(db.Model):
# id = db.Column(db.Integer, primary_key=True)
# username = db.Column(db.String(80), unique=True, nullable=False)
# email = db.Column(db.String(120), unique=True, nullable=False)
# def __init__(self , username, email):
# self.username = username
# self.email = email
# def __repr__(self):
# return '<User %r>' % self.username
class Blogpost(db.Model):
id=db.Column(db.Integer, primary_key=True)
title=db.Column(db.String(50))
subtitle=db.Column(db.String(50))
author=db.Column(db.String(50))
date=db.Column(db.DateTime)
content=db.Column(db.Text)
#app.route('/')
def index():
return render_template('index.html')
#app.route('/about')
def about():
return render_template('about.html')
#app.route('/post')
def post():
return render_template('post.html')
#app.route('/contact')
def contact():
return render_template('contact.html')
#app.route('/add')
def add():
return render_template('add.html')
#app.route('/addpost', methods=['POST'])
def addpost():
if request.method=='POST':
title = request.form['title']
subtitle = request.form['subtitle']
author = request.form['author']
date = request.form['date']
content = request.form['content']
post=Blogpost(title=title, subtitle=subtitle, author=author, date_posted=datetime.now(), content=content)
db.session.add(post)
db.session.commit()
return redirect(url_for('index'))
if __name__ == '__main__':
app.run(debug=True)
#And below is my is my add.html file
<!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>Clean Blog - Start Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link href="{{url_for('static', filename='bootstrap.min.css')}}" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="{{url_for('static', filename='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='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="{{('/')}}">Start Bootstrap</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="{{('/post')}}">Sample Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{('/contact')}}">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Header -->
<header class="masthead" style="background-image: url('{{url_for('static', filename='contact-bg.jpg')}}')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="page-heading">
<h1>Create a new blogpost</h1>
<span class="subheading">You can create a new blogpost here</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<form name="addForm" id="addForm" name="addForm" method="POST" action="{{url_for('addpost')}}" novalidate>
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<label>Title</label>
<input type="text" class="form-control" placeholder="title" id="title" name="title" required data-validation-required-message="Please enter a title.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<label>Sub-title</label>
<input type="email" class="form-control" placeholder="subtitle" name="subtitle" id="subtitle" required data-validation-required-message="Please enter your Sub-title.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Author</label>
<input type="tel" class="form-control" placeholder="author" name="author" id="author" required data-validation-required-message="Your Name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<label>Post</label>
<textarea rows="5" class="form-control" placeholder="content" name="content" id="name" required data-validation-required-message="Please enter content."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="form-group">
<button type="submit" class="btn btn-primary" id="sendMessageButton">Send</button>
</div>
</form>
</div>
</div>
</div>
<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">
</ul>
<p class="copyright text-muted">Copyright © Your Website 2017</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="{{url_for('static', filename='jquery.min.js')}}"></script>
<script src="{{url_for('static', filename='bootstrap.bundle.min.js')}}"></script>
<!-- Contact Form JavaScript -->
<script src="{{url_for('static', filename='jqBootstrapValidation.js')}}"></script>
<script src="{{url_for('static', filename='contact_me.js')}}"></script>
<!-- Custom scripts for this template -->
<script src="{{url_for('static', filename='clean-blog.min.js')}}"></script>
</body>
</html>
When I try submitting after filling the form I get the error:
Bad Request
The browser (or proxy) sent a request that this server could not understand.
I have tried outputting it on a file but I still get the error

I debugged this with adding
import pdb; pdb.set_trace()
to addpost() immediately after the request method check. It turns out that date = request.form['date'] instruction fails because there is no date on your form:
(Pdb) request
<Request 'http://localhost:5000/addpost' [POST]>
(Pdb) request.form
ImmutableMultiDict([('content', u'asdfasdfasdfasdf'), ('title', u'asdfasdf'), ('subtitle', u'adsfasdfasdf'), ('author', u'asdfasdfasdf')])
(Pdb) request.form['title']
u'asdfasdf'
(Pdb) request.form['date']
*** BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
Once I remove the date = request.form['date'], the error disappears.

Scrapy response not showing the actual html in the browser

I am trying to scrape all the location names with phone number from :http://www.zambrero.com/zambrero-au/locations . But the problem i am facing is: while scrapy is scraping the site all content from the page are not loaded.
The list of restaurant are not loaded as shown in the picture:
you can see raw html scraped by scrapy below in the code :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" version="XHTML+RDFa 1.0" dir="ltr" xmlns:content="http://purl.org/rss/1.0/modules/content/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:url" content="http://www.zambrero.com/zambrero-au/locations">
<meta property="og:title" content="Locations">
<link rel="shortcut icon" href="http://www.zambrero.com/zambrero-au/sites/default/files/favicon.ico" type="image/vnd.microsoft.icon">
<meta property="og:image" content="http://www.zambrero.com/zambrero-au/sites/default/files/foodday_logo.png">
<meta property="og:description" content="We have joined with Stop Hunger Now, an international hunger relief agency, to deliver nutrition to those w>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="generator" content="Drupal 7 (http://drupal.org)">
<link rel="canonical" href="http://www.zambrero.com/zambrero-au/locations">
<link rel="shortlink" href="http://www.zambrero.com/zambrero-au/node/5">
<title>Locations | Zambrero</title>
<style type="text/css" media="all">
#import url("http://www.zambrero.com/zambrero-au/modules/system/system.base.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/modules/system/system.menus.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/modules/system/system.messages.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/modules/system/system.theme.css?oq31tn");
</style>
<style type="text/css" media="all">
#import url("http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/css/location.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/css/vendors/tooltipster.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/css/vendors/bootstrap.min.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/css/vendors/normalize.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/css/style.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/css/responsive.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/css/vendors/font-awesome.css?oq31tn");
</style>
<style type="text/css" media="all">
#import url("http://www.zambrero.com/zambrero-au/modules/comment/comment.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/sites/all/modules/date/date_api/date.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/modules/field/theme/field.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/modules/node/node.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/modules/search/search.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/modules/user/user.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/sites/all/modules/wfm/styles.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/sites/all/modules/views/css/views.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/sites/all/modules/ckeditor/css/ckeditor.css?oq31tn");
</style>
<style type="text/css" media="all">
#import url("http://www.zambrero.com/zambrero-au/sites/all/modules/ctools/css/ctools.css?oq31tn");
#import url("http://www.zambrero.com/zambrero-au/sites/all/modules/webform/css/webform.css?oq31tn");
</style>
<script src="http://connect.facebook.net/signals/config/651694824922244?v=2.7.18" async=""></script><script async="" src="//connect.facebook.net/e>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/misc/jquery.once.js?v=1.2"></script>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/misc/drupal.js?oq31tn"></script>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/js/vendors/jquery-ui.min.js?v=1.3"></script>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/js/vendors/lodash.min.js?v=1.3"></script>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/js/vendors/velocity.min.js?v=1.3"></script>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/js/vendors/jquery.tooltipster.min.js?v=1.3"></scri>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/js/locations.js?v=1.3"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7TACj4h45hOlxSawUHZznJ9Vrw2SGVl8&v=1.3"></script>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/js/vendors/bootstrap.min.js?v=1.0"></script>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/js/header.js?v=1.0"></script>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/js/vendors/jquery.nicescroll.js?v=1.0"></script>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/sites/all/modules/admin_menu/admin_devel/admin_devel.js?oq31tn"></script>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/misc/textarea.js?v=7.35"></script>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/sites/all/modules/webform/js/webform.js?oq31tn"></script>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/sites/all/modules/google_analytics/googleanalytics.js?oq31tn"></script>
<script type="text/javascript" src="http://www.zambrero.com/zambrero-au/misc/tableheader.js?oq31tn"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createEleme;
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/zambrero-au\/","pathPrefix":"","ajaxPageState":{"theme":"zambrero","theme_token":"hQ7YHk1sgyMqTB73QeRA;
//--><!]]>
</script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/10/common.js"></script><script type="text/java>
<body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-5 node-type-page">
<div id="skip-link">
Skip to main content
</div>
<script type="text/javascript" src="https://ipac.ctnsnet.com/int/integration?pixel=39677372&nid=1125532&cont=s" async="true"></script>
<div class="content" id="toggle_left">
<meta name="google-site-verification" content="ruAGZQhax8iO6bUFMNLrNMjiUpwkL25AX7xX76lUSOA">
<script type="application/javascript">
menuOrderFormStates = ["Western Australia", "Northern Territory"];
locationOrderFormStates = ["WA", "NT"];
deviceType = "computer";
australia = "Australia";
oz_nutritional_information = "Zambrero_AUS_Nutritional_Information.pdf";
oz_order_form_menu_national = "ZAMBRERO-ORDER-FORM_NATIONAL.pdf";
oz_order_form_menu_wa = "ZAMBRERO-ORDER-FORM_WA.pdf";
oz_order_form_menu = "ZAMBRERO-ORDER-FORM.pdf";
</script>
<div id="header" class="header-content">
<div class="container">
<div class="row">
<div class="toggle_menu"></div>
<div class="col-sm-2 logo_div">
<a class="logo" href="/zambrero-au/">
<img src="http://www.zambrero.com/zambrero-au/sites/all/themes/zambrero/logo.png" alt="">
</a>
</div>
<div class="col-sm-10 col-xs-12 nav-menu">
<div class="region region-header">
<div id="block-menu-block-1" class="block block-menu-block">
<div class="content">
<div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu"><li class="first leaf menu-mlid-1102">Home</li>
<li class="leaf menu-mlid-334">Story</li>
<li class="leaf menu-mlid-335">Menu</li>
<li class="leaf active-trail active menu-mlid-336">Locations<img src="/zambrero-au/>
<li class="leaf menu-mlid-337">Franchise</li>
<li class="leaf menu-mlid-890">Jobs</li>
<li class="leaf menu-mlid-1219">Meal Packing Day</li>
<li class="last leaf menu-mlid-339">Contact Us</li>
</ul></div>
</div>
</div>
</div>
<a href="/zambrero-au/plate4plate" class="counter ">
<div class="counter subLogo"><div class="counter-container">
<p class="zambText">15,657,825</p><p>Meals Donated</p></div></div>
</a>
</div>
<div class="col-xs-4 col-xs-offset-8 signup-content" id="signup_form">
<div class="signup-container">
<div class="region region-signup">
<div id="block-webform-client-block-1351" class="block block-webform">
<div class="content">
<div id="webform-ajax-wrapper-1351"><form class="webform-client-form webform-client-form-1351" enctype="multipart/form-data" action="/zambrero-a>
<div class="no-display"><div class="form-item webform-component webform-component-textarea webform-component--signup-header">
<label class="element-invisible" for="edit-submitted-signup-header">Signup Header </label>
<div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-submitted-signup-header" name="submitted[sign>
</div>
</div>
<h5 id="signup_head"></h5>
<div class="messages no-display"></div>
<input name="form_build_id" value="form-kd7Ad9DzJzE5YOcPs0dNYi9VCFyhdTNQEz5hz9KokMY" type="hidden">
<input name="form_id" value="webform_client_form_1351" type="hidden">
<input name="webform_ajax_wrapper_id" value="webform-ajax-wrapper-1351" type="hidden">
<div class="form-item webform-component webform-component-textfield webform-component--first-name">
<label class="element-invisible" for="edit-submitted-first-name">First Name <span class="form-required" title="This field is required.">*</span></>
<input placeholder="First Name*" id="edit-submitted-first-name" name="submitted[first_name]" value="" size="60" maxlength="128" class="form-text re>
</div>
<div class="form-item webform-component webform-component-textfield webform-component--last-name">
<label class="element-invisible" for="edit-submitted-last-name">Last Name <span class="form-required" title="This field is required.">*</span></la>
<input placeholder="Last Name*" id="edit-submitted-last-name" name="submitted[last_name]" value="" size="60" maxlength="128" class="form-text requi>
</div>
<div class="form-item webform-component webform-component-email webform-component--email">
<label class="element-invisible" for="edit-submitted-email">Email <span class="form-required" title="This field is required.">*</span></label>
<input class="email form-text form-email required" placeholder="Email*" id="edit-submitted-email" name="submitted[email]" size="60" type="email">
</div>
<div class="form-group form-item webform-component webform-component-textfield webform-component--mobile-number">
<label class="element-invisible" for="edit-submitted-mobile-number">Mobile Number <span class="form-required" title="This field is required.">*</s>
<input placeholder="MOBILE NUMBER" class="form-control form-text required" id="edit-submitted-mobile-number" name="submitted[mobile_number]" value=>
</div>
<input value="Submit" name="op" id="sign-up-submit" class="form-submit ajax-processed" type="submit">
<div id="signup-spinner" style="display: none;" class="ajax-progress ajax-progress-throbber">
<div class="throbber"> </div>
</div></div></form></div> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="responsive_div" style="height: 648px;">
<div class="responsive_menu">
<div class="region region-header">
<div class="region region-header">
<div id="block-menu-block-1" class="block block-menu-block">
<div class="content">
<div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu"><li class="first leaf menu-mlid-1102">Home</li>
<li class="leaf menu-mlid-334">Story</li>
<li class="leaf menu-mlid-335">Menu</li>
<li class="leaf active-trail active menu-mlid-336">Locations<img src="/zambrero-au/>
<li class="leaf menu-mlid-337">Franchise</li>
<li class="leaf menu-mlid-890">Jobs</li>
<li class="leaf menu-mlid-1219">Meal Packing Day</li>
<li class="last leaf menu-mlid-339">Contact Us</li>
</ul></div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="zone">ZAMBRERO ZONE</div>
<div class="store">ZAM STORE</div>
<br>
<div class="zone">TERMS</div>
<div class="store"><a style="border-right:0px none;" href="/zambrero-au/privacy">PRIVACY POLICY</a></div>
<!-- <div class="zone">
ALLERGENS
</div> -->
<div class="row">
<div class="col-xs-3">
<div id="countrySelect" class="country-select">
<img src="/zambrero-au/sites/all/themes/zambrero/images/flags/au.png" alt="AU">
</div>
<div id="countrySelectContainer" class="country-select-container">
<div class="countryList">
<ul>
<li><a href="http://zambrero.com.au/" class="active"><span><img src="/zambrero-au/sites/all/themes/zambrero/images/f>
<li><a href="http://zambrero.co.nz/"><span><img src="/zambrero-au/sites/all/themes/zambrero/images/flags/nz.png" alt>
<li><a href="http://zambrero.ie/"><span><img src="/zambrero-au/sites/all/themes/zambrero/images/flags/ireland.png" a>
</ul>
</div>
</div>
</div>
<div class="col-xs-9">
<div id="socialMedia">
<div id="twitter"></div>
<div id="facebook"></div>
<div id="instagram"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="locations" class="main-content">
<div class="region region-content">
<div id="node-5" class="node node-page clearfix" about="/zambrero-au/locations" typeof="foaf:Document">
<span property="dc:title" content="Locations" class="rdf-meta element-hidden"></span><span property="sioc:num_replies" content="0" datatype="x>
<div class="content">
</div>
</div>
<div class="view view-locations view-id-locations view-display-id-block view-dom-id-2691cbaeae39091f7c4d4a0187669315">
<div class="view-content">
<div class="location_wrapper">
<div class="location_map">
<div class="location_search_area">
<div class="location_search_feild">
<div class="search-input" id="postcode-search-container">
<input id="postcode_search" placeholder="Please enter suburb, postcode, restaurant or address" type="text">
</div>
<button class="nearest">Find Nearest</button>
<button class="view_all" id="view_all_rst">View ALL</button>
</div>
</div>
<div class="map_wrapper">
<div id="map" style="height: 410px;"><div style="height: 100%; width: 100%;"></div></div>
</div>
</div>
<div class="location_search_list">
<div class="store_wrapper"><span class="common_head head_border"></span><span class="search_head"></span></div>
<div id="state_select_div"><select id="state_select"><option value="all">VIEW BY STATE</option> </select></div>
<ul id="locations-list"></ul>
</div>
</div>
</div>
</div> </div>
</div>
<!-- footer -->
<div id="footer">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div id="countrySelect" class="country-select">
<a href="#" title="Change location"><img src="/zambrero-au/sites/all/themes/zambrero/images/flags/au>
</div>
<div class="zone">ZAMBRERO ZONE</div>
<div class="store">ZAM STORE</div>
<div class="privacy-policy"><a style="border-right:0px none;" href="/zambrero-au/privacy">PRIVACY POLICY</a></div>
<!-- <div class="allergens">
ALLERGENS
</div> -->
<div id="countrySelectContainer" class="country-select-container">
<div class="countryList">
<ul>
<li><a href="http://zambrero.com.au/" class="active"><span><img src="/zambrero-au/si>
<li><a href="http://zambrero.co.nz/"><span><img src="/zambrero-au/sites/all/themes/z>
<li><a href="http://zambrero.ie/"><span><img src="/zambrero-au/sites/all/themes/zambrero/images/flags/ireland.png" a>
</ul>
</div>
</div>
</div>
<div class="col-xs-6">
<div id="socialMedia">
<div id="twitter"></div>
<div id="facebook"></div>
<div id="instagram"></div>
<img style="display: none" src="http://r.turn.com/r/beacon?b2=9m-hf3utMNJWPnB_6hqUv1_gb_Bvk2bNtrNapLri5TBDG2pOjucpzb6DsX9lTk>
</div>
</div>
</div>
</div>
</div>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function()
{n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}
;if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','//connect.facebook.net/en_US/fbevents.js');
fbq('init', '651694824922244');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=651694824922244&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
<iframe src="javascript:false" style="width: 0px; height: 0px; border: 0px none; display: none;"></iframe></div></body></html>
here is the code :
import scrapy
class bhatbhatenionline(scrapy.Spider):
name = "digital"
start_urls = [
'http://www.zambrero.com/zambrero-au/locations'
]
def parse(self,response):
for category in response.xpath("//li[contains(#class,'store-location ')]"):
print category.xpath("//h2[contains(#class,'store-name')]/text()")

can't get rid of gap between header and body

I have tried everything from editing padding/margins to saving file as utf-8 without BOM in notepad suggested in other posts to get his gap to go away. Nothing is seems to work so I come to ask for help.
I am developing this webpage using python/django framework in which my base.html file looks like this
{% load bootstrap3 %}
<!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">
<title>Michael Goytia</title>
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Static navbar -->
<nav class="navbar navbar-custom navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<!-- put three little bars in toggle button-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'personal_info:index' %}"style="color:#6C9F9F"><i class="fa fa-user-secret"></i>
<b>Michael Goytia</b></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="{% url 'personal_info:about_me' %}"style="color:#6C9F9F"><i class="fa fa-user-circle-o"></i>
<b>About Me</b></a>
</li>
<li><a href="{% url 'personal_info:projects' %}"style="color:#6C9F9F"><i class="fa fa-paper-plane"></i>
<b>Projects</b></a>
</li>
<li><a href="{% url 'personal_info:contact' %}"style="color:#6C9F9F"><i class="fa fa-address-book"></i>
<b>Contact Information</b></a>
</li>
</ul>
</div><!--/.nav-collaspse -->
</div>
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div><!-- /container -->
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<style>
.navbar-custom
{
background:#013737;
border-radius:0;
}
.navbar-toggle .icon-bar
{
background-color:#6C9F9F;
}
.navbar-header .navbar-toggle
{
background-color:#0F5151;
}
footer{
background:#013737;
position:fixed;
left:0px;
bottom:0px;
height:80px;
width:100%;
}
body{
background:#438383;
padding: 0;
margin: 0;
}
.nav > li >a:hover{
background-color:#256A6A;
}
</style>
</body>
<footer>
</footer>
</html>
I believe the problem resides in my base.html file however here is a sample html of another page that use base.html
{% extends "personal_info/base.html" %}
{% block content %}
<h1><b><u>Projects</u></b><h1>
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Github Information</center></b>
</h1>
</div>
<div class="panel-body">
<div class="github-card" data-github="goytia54" data-width="400" data-height="150" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
</div>
</div> <!--panel -->
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Academic</center></b>
</h1>
</div>
<div class="panel-body">
</div>
</div> <!--panel -->
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Personal</center></b>
</h1>
</div>
<div class="panel-body">
</div>
</div> <!--panel -->
<style>
.panel-custom .panel-heading{
background-color:#013737;
color:#6C9F9F;
border-radius: 50px 15px;
}
.panel-custom
{
background-color:#438383;
}
</style>
{% endblock content %}
I am new to web development so any help would me much appreciated.

Alright well after playing around with a bunch of things I realized somehow I had a border around my header. So in order to get rid of it I added the line
.container .page-header { border-bottom: 0px:} which then got rid of this border.
Not sure why the border was there in the first place.
If anyone comes along I hope this helps.

Django Upload Image can not find uploaded image

I am new to Django and deploying upload image function recently.
I developed simple HTML template and it worked, but somehow, I could not find the uploaded images.
Below are my code.
settings.py (relevant lines)
MEDIA_ROOT = '/Users/jenny/Envs/django_test/static/'
MEDIA_URL = '/media/'
models.py
from django.db import models
from time import time
def get_upload_file_name(instance, filename):
return "uploaded_files/%s_%s" % (str(time()).replace('.','_'), filename)
# Create your models here.
class UploadImage(models.Model):
thumbnail = models.FileField(upload_to=get_upload_file_name)
def __unicode__(self):
return self.thumbnail
forms.py
from django import forms
from .models import UploadImage
class UploadImageForm(forms.ModelForm):
class Meta:
model = UploadImage
fields = ('thumbnail',)
views.py
def uploadtest(request):
return render_to_response("uploadtest.html",context_instance=RequestContext(request))
def uploadtest1(request):
if request.POST:
form = UploadImageForm(request.POST, request.FILES)
if form.is_valid():
form.save()
return HttpResponseRedirect('/uploadtest1/',context_instance=RequestContext(request))
else:
form = UploadImageForm()
return render_to_response ('uploadtest1.html',context_instance=RequestContext(request))
uploadtest.html
<form action="{% url "uploadtest1" %}" method="post" enctype="multipart/form-data">{% csrf_token %}
<p>
<input id="id_image" type="file" class="" name="image">
</p>
<input type="submit" value="Submit" />
</form>
uploadtest1.html
<p> uploaded! </p>
Would you please help me point out the problem? And how do I change the code to make it work?

I think you have misspelled your html input. In your model the field is named thumbnail, but the name of your input is image.
Make your input read like:
<input id="id_thumbnail" type="file" class="" name="thumbnail">

I solved the problem and now the code is running well on my launched website.
forms.py
from django import forms
class DocumentForm(forms.Form):
docfile = forms.FileField(label='Select a file')
models.py
from django.db import models
# Create your models here.
class Document(models.Model):
#docfile = models.FileField(upload_to='documents/%Y/%m/%d')
docfile = models.FileField(upload_to='documents/')
views.py
from django.shortcuts import render_to_response
from django.template import RequestContext
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse
from uploadfile.models import Document
from uploadfile.forms import DocumentForm
def imageupload(request):
# Handle file upload
if request.method == 'POST':
form = DocumentForm(request.POST, request.FILES)
if form.is_valid():
newdoc = Document(docfile = request.FILES['docfile'])
newdoc.save()
# Redirect to the document list after POST
return HttpResponseRedirect(reverse('uploadfile.views.list'))
else:
form = DocumentForm() # A empty, unbound form
# Load documents for the list page
doc_list = []
documents = Document.objects.all()
for document in documents:
doc_list.append(document.docfile.name)
print doc_list[-1]
# Render list page with the documents and the form
return render_to_response('imageupload.html',
{'documents': documents,'form': form},
context_instance=RequestContext(request))
def imageuploadresult(request):
#here I used PyImgur package to upload image and get public url. Use sbi to get the Google BestGuess. What I return to this page is the uploaded image and google best guess. I will skip this part of code.
return render_to_response(
'imageuploadresult.html',
{'query': q, 'imagepath':path2},
context_instance=RequestContext(request))
imageupload.html
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title> Image Upload of **** System</title>
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/css/dashboard.css" rel="stylesheet">
<!-- Custome CSS -->
<link href="/static/css/dataurl2.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="/static/js/ie8-responsive-file-warning.js"> </script><![endif]-->
<script src="/static/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<!--script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script-->
<!--script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script-->
<script src="/static/js/html5shiv.min.js"></script>
<script src="/static/js/respond.min.js"></script>
<!--script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script-->
<![endif]-->
</head>
<body>
<!--div class="loader"></div-->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#navbar" aria-expanded="false" aria- controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href='/navigation/'>AKEOS</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>Reports</li>
<li>Export</li-->
</ul>
<ul class="nav nav-sidebar">
<li class="active">(current)</span></li>
<li>Analytics</li>
<li>Export</li-->
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main list-group">
<h1></h1>
<h2></h2>
<h3 class="custome-bar">
<h1></h1>
<h2></h2>
<form action="{% url "imageuploadresult" %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>{{ form.non_field_errors }}</p>
<p>{{ form.docfile.label_tag }} {{ form.docfile.help_text }}</p>
<p>
{{ form.docfile.errors }}
{{ form.docfile }}
</p>
<p><input type="submit" value="Upload" style="font- size:10pt;color:white;background-color:#339933;border:2px solid #339933;padding:3px" /></p>
</form>
</h3>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/docs.min.js"></script>
<script src="/static/js/pace.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/static/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
imageuploadresult.html
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title> Image Upload of **** System</title>
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/css/dashboard.css" rel="stylesheet">
<!-- Custome CSS -->
<link href="/static/css/dataurl2.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="/static/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="/static/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<!--script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script-->
<!--script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script-->
<script src="/static/js/html5shiv.min.js"></script>
<script src="/static/js/respond.min.js"></script>
<!--script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script-->
<![endif]-->
</head>
<body>
<!--div class="loader"></div-->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href='/navigation/'>AKEOS</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<!--li>You searched for:<strong> {{query}} </strong></li-->
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
</ul>
<ul class="nav nav-sidebar">
<!--li>Analytics</li>
<li>Reports</li>
<li>Export</li-->
</ul>
<ul class="nav nav-sidebar">
<li class="active">(current)</span></li>
<!--li>Reports</li>
<li>Analytics</li>
<li>Export</li-->
</ul>
</div>
<!--div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"-->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main list-group">
<h3 class="custome-bar">
<h3>The Best Guess is:<strong> {{query}} </strong>
<form action="/main-page/" method="get">
<h5> To start over again, click the sidebars; to continue, click the button "Search" </h5>
<h5>
<input type="submit" name = "Submit" value="Search" >
</h5>
<h3></h3>
</form>
</h3>
<!--a class="btn btn-large btn-info" href="/main-page/">Search</a-->
<p><img src={{imagepath}} class='img-responsive' /></p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/docs.min.js"></script>
<script src="/static/js/pace.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/static/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
create table in MySQL
table name : upload file_document
table columns : ID, docfile
Now you can get it work on your website!
Have a nice day!

Categories