I have this dropdown menu from Bootstrap. I have different categories that a user could choose from. When they click the 'Department' button and select a department, I would like the 'Department' button to change to whatever the user selected. I have attached the HTML for the dropdown.
<form class="navbar-form navbar-left" action="{{ url_for('my_view.product_search') }}" method="GET">
<div class="form-group">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Department <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Laptops</li>
<li>Cameras</li>
<li>Gaming</li>
<li>Networking</li>
<li>Tools</li>
<li>Headphones</li>
<li>Speakers</li>
<li>Miscellaneous</li>
<li>Blu-Ray</li>
</ul>
</div><!-- /Dropdown Button -->
<input type="text" name="name" class="form-control" placeholder="Search Products...">
</div><!-- /input-group -->
<button type="submit" class="btn btn-default">Submit</button>
</div><!-- /.col-lg-6 -->
</div>
</form><!-- END SEARCH FUNCTION -->
EDIT
Here is a link to what the dropdown looks like
You need to use javascript. I added a click event to the links within the <li> tag, and a <span> within your button to allow for simple jQuery selection. The URLs here are relative to my local testing environment.
This is a working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StackOverflow Testing...</title>
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
</head>
<body>
<form action method="post">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="button_text">Department</span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a class="select_option" href="#">Laptops</a></li>
<li><a class="select_option" href="#">Cameras</a></li>
<li><a class="select_option" href="#">Gaming</a></li>
<li><a class="select_option" href="#">Networking</a></li>
<li><a class="select_option" href="#">Tools</a></li>
<li><a class="select_option" href="#">Headphones</a></li>
<li><a class="select_option" href="#">Speakers</a></li>
<li><a class="select_option" href="#">Miscellaneous</a></li>
<li><a class="select_option" href="#">Blu-Ray</a></li>
</ul>
</div><!-- /Dropdown Button -->
<input type="text" name="name" class="form-control" placeholder="Search Products...">
</div><!-- /input-group -->
<button type="submit" class="btn btn-default">Submit</button>
</div><!-- /.col-lg-6 -->
</div>
</form>
<script charset="utf-8" type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script charset="utf-8" type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script charset="utf-8" type="text/javascript">
$('a.select_option').bind('click', function() {
var selected = $(this).text();
$('#button_text').text(selected);
});
</script>
</body>
</html>
Related
I have visited these answers too Running Flask environment using HTML:receiving error message of expected else statement and How to fix jinja2 exceptions Template SyntaxError: but could not solve the problem.
I am a beginner at Flask and tried using jinja2 template inheritance. Here are my files.
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="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content-->
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<!-- Divider-->
<hr class="my-4" />
<!-- Pager-->
<div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#!">Older Posts →</a></div>
</div>
</div>
</div>
{% endblock body %}
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="" />
<link href="{{ url_for('static',filename='css/styles.css') }}" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="/about">About</a></li>
</ul>
</div>
</div>
</nav>
{% block body %} { % endblock % }
<!-- Footer-->
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
I want to inheritent the template from layout.html to index.html. But I am getting this error:
jinja2.exceptions.TemplateSyntaxError: Unexpected end of template. Jinja was looking for the following tags: 'endblock'. The innermost block that needs to be closed is 'block'.
I have surfed a lot of websites to solve it but could not. Any help would be highly appreciated.
Finally! I just got the reason for the error. The error was generated at this line:
{% block body %} { % endblock % }
After figuring it out, I came to know that there should be no space between the braces and the % sign. And the code should look like this.
{% block body %} {% endblock %}
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 %}
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()")
This is my code for my template
{% block content %}
<div class='main'>
<form method='POST' action='/social/profile/' enctype='multipart/form-data'>
{% csrf_token %}
<h3>Select an image for your profile. Max 300x300 and 1mb.</h3>
<br/>
<img src="{{ image.url }}" alt="Profile Image" height="100px" width="100px" />
{{ form.profileimg.errors }}
{{ form.profileimg }}
{{ form.non_field_errors }}
<br/>
<h3>Enter or edit your details</h3> <br/>
<textarea name='text' cols='50' rows='3'>{{ text }}</textarea>
<h3>Current Workplace</h3>
<br/>
<input id="workplace" type="text" class="" name="workplace" value="{{ workplace }}">
<h3>Telephone Number</h3>
<br/>
<input id="telephone" type="text" class="" name="telephone" value="{{ telephone }}">
<h3>Address</h3>
<br/>
<textarea id="address" type="text" class="" name="address">{{ address }}</textarea>
<br/>
<input type="submit" value="Submit" >
</form>
</div>
{% endblock %}
The form.profileimg is very simple with only 1 ImageField.
But the submit button is not click-able for some reason? It was working before the form.profileimg field, can I not mix Django Forms and normal html?
Browser source:
<!DOCTYPE HTML>
<html>
<head>
<title>Social Network: Facemagazine</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/static/social/css/main.css" />
</head>
<body class="loading">
<div id="wrapper">
<div id="bg"></div>
<div id="overlay"></div>
<div id="main">
<!-- Header -->
<header id="header" class="whitebox">
<h1> Facemagazine </h1>
<p>Worlds second best social network! </p>
<nav >
<ul>
<li><a class='icon' href='/social/members/?view=julian'> <h3> Home </h3> </a></li>
<li><a class='icon' href='/social/members/'> <h3>Members </h3> </a></li>
<li><a class='icon' href='/social/friends/'> <h3> Friends </h3> </a></li>
<li><a class='icon' href='/social/messages/'> <h3> Messages </h3> </a></li>
<li><a class='icon' href='/social/profile/'> <h3> Edit Profile </h3> </a></li>
<li><a class='icon' href='/social/logout/'> <h3> Log out </h3> </a></li>
</ul>
</nav>
<br>
<div class='main'>
<form method='POST' action='/social/profile/' enctype='multipart/form-data'>
<input type='hidden' name='csrfmiddlewaretoken' value='kire68pdevP0JZt8gTUYSsj6Dit1cgro' />
<h3>Select an image for your profile. Max 300x300 and 1mb.</h3>
<br/>
<img src="/media/profileimgs/no-img.jpg" alt="Profile Image" height="100px" width="100px" />
<input id="id_profileimg" name="profileimg" type="file" />
<br/>
<h3>Enter or edit your details</h3> <br/>
<textarea name='text' cols='50' rows='3'>Test Details</textarea>
<h3>Current Workplace</h3>
<br/>
<input id="workplace" type="text" class="" name="workplace" value="Workplacee">
<h3>Telephone Number</h3>
<br/>
<input id="telephone" type="text" class="" name="telephone" value="Telefon">
<h3>Address</h3>
<br/>
<textarea id="address" type="text" class="" name="address">adres</textarea>
<br/>
<input type="submit" value="Submit" >
</form>
</div>
<br>
</header>
<!-- Footer -->
<footer id="footer">
<span class="copyright">© Group 45</span>
</footer>
</div>
</div>
<!--[if lte IE 8]><script src="/static/social/js/ie/respond.min.js"></script><![endif]-->
<script>
window.onload = function() { document.body.className = ''; }
window.ontouchmove = function() { return false; }
window.onorientationchange = function() { document.body.scrollTop = 0; }
</script>
<script src="/static/social/scripts.js"/>
</body>
</html>
Issue was the footer. The CSS was messed up so was overlaying on top of the button somehow.