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()")
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 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>
I have a simple HTML/CSS file:---
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="Creator" content="Aakash Gupta">
<meta name="From YouTube" content="Easy Tutorials">
<title>Complete Website Design</title>
<link rel="stylesheet" type="text/css" href="../static/tutorial_website.css">
</head>
<body>
<section class="header">
<div class="container">
<img src="../static/tutorial/images/logo.png" class="logo">
<div class="header-text"><h2>Tell me and I forget. Teach me and I remember.<br>Involve me and I learn’<br>–Benjamin Franklin</h2>
<br>
<span class="square"></span>
<p>
In 2014, India’s global education ranking slipped to 93. This, together with a series of scams faced by the Indian education sector, calls for an immediate need to bring reforms in our education system. Indian Education System has been synonymous with ‘Examinations’, ‘Board Exams’, ‘Entrance Exams’, ‘Marks’, etc.
</p>
<button class="common-btn">Read More</button>
<div class="line">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
</div>
</div>
</section>
<nav id="side-nav">
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>FEATURES</li>
<li>COURSES</li>
<li>OFFER</li>
<li>CONTACT</li>
</ul>
</nav>
<img src="../static/tutorial/images/menu.png" id="menu-btn">
<!--about-->
<section class="about">
<div class="about-left-col">
<img src="../static/tutorial/images/about.png">
</div>
<div class="about-right-col">
<div class="about-text">
<h1>About Us</h1>
<p>
We are a consultancy that helps organisations achieve exceptional results by finding and applying practical solutions to complex business and people challenges. We interrupt existing patterns of thinking and instigate powerful, sustainable change.
</p>
<h2>One learns from books and example only that certain things can be done. Actual learning requires that you do those things.</h2>
<h3>---Frank Herbert</h3>
</div>
</div>
</section>
<!--FEATURES-->
<section class="features">
<div class="features-row">
<div id="features-col">
<img src="../static/tutorial/images/pic-1.png">
<h4>Learn Anywhere</h4>
<p>Switch between your computer,tablet or mobile device</p>
</div>
<div id="features-col">
<img src="../static/tutorial/images/pic-2.png">
<h4>Expert Teachers</h4>
<p>Learn from industry experts who are passionate about teachinhg</p>
</div>
<div id="features-col">
<img src="../static/tutorial/images/pic-3.png">
<h4>Unlimited Access</h4>
<p>Choose what you'd like to learn from out extensive subscription library</p>
</div>
</div>
</section>
<div class="features-btn">
<div class="line">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
<button class="common-btn">Start Free Trial</button>
</div>
<!--courses-->
<section class="courses">
<div class="container-course-row">
<div class="course-left-col">
<div class="course-text">
<h1>Browse our Top<br>Courses</h1>
<span class="square"></span>
<p>C++ is a general-purpose programming language created by Bjarne Stroustrup as an extension of the C programming language, or "C with Classes". The language has expanded significantly over time, and modern C++ now has object-oriented, generic, and functional features in addition to facilities for low-level memory manipulation. </p>
<button class="common-btn">View all Courses</button>
<div class="line">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="course-right-col">
<img src="../static/tutorial/images/course.png">
</div>
</div>
</section>
<!--offer-->
<section class="Offer">
<div class="about-left-col">
<img src="../static/tutorial/images/offer.png">
</div>
<div class="about-right-col">
<div class="about-text">
<h1>Limitless learning,<br>Limitless possibilities</h1>
<p style="margin: 20px 0">
We are a consultancy that helps organisations achieve exceptional results by finding and applying practical solutions to complex business and people challenges
</p>
<span class="square"></span>
<br>
<button class="common-btn" style="margin: 25px 0">Start Free Trial</button>
<br>
<div class="line">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
</section>
<!--Contact-->
<section id="contact">
<div class="container-contact-row">
<div class="contact-left-col">
<h1>Sign Up to join our<br>learning community</h1>
<form>
<input type="text" placeholder="Enter Name">
<input type="email" placeholder="Enter e-mail">
<input type="password" placeholder="Enter password">
<div class="btn-box">
<button class="common-btn">Sign-up</button>
<button class="common-btn">Start Free Trial</button>
</div>
</form>
<div class="line" style="padding-left: 40px;">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
</div>
<div class="contact-right-col">
<img src="../static/tutorial/images/contact.png">
</div>
</div>
</section>
<section class="footer">
<div class="container-footer-row">
<hr>
<div class="footer-left-col">
<div class="footer-links">
<div class="link-title">
<h4>Product</h4>
<small>Our Plan</small><br>
<small>Free Trial</small>
</div>
<div class="link-title">
<h4>About Us</h4>
<small>Request Demo</small><br>
<small>FAQs</small>
</div>
<div class="link-title">
<h4>Support</h4>
<small>Features</small><br>
<small>Contact Us</small>
</div>
<div class="link-title">
<h4>Explore</h4>
<small>Find a nonprofit</small><br>
<small>Coporate Solution</small>
</div>
</div>
</div>
<div class="footer-right-col">
<div class="footer-info">
<div class="copyright">
<small>support#Xypo.com</small><br>
<small>copyright 2020 Xypo</small>
</div>
<div class="footer-logo">
<img src="../static/tutorial/images/logo.png">
<button class="common-btn">English</button>
</div>
</div>
</div>
</div>
</section>
<!--icons-->
<div class="social-icons">
<img src="../static/tutorial/images/facebook.png">
<img src="../static/tutorial/images/instagram.png">
<img src="../static/tutorial/images/twitter.png">
<img src="../static/tutorial/images/linkedin.png">
</div>
<script type="text/javascript">
var menubtn = document.getElementById("menu-btn");
var sidenav = document.getElementById("side-nav");
sidenav.style.right= "-250px";
menubtn.onclick = function(){
if (sidenav.style.right == "-250px"){
sidenav.style.right="0";
}
else{
sidenav.style.right="-250px";
}
}
</script>
</body>
</html>
Flask:--
from flask import Flask
from flask import request,render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('Tutorial_website.html')
if __name__ == '__main__':
app.run(debug=True)
I have tried to follow all the rules(as far as i know) like keeping html file in "templates" folder and css file and other images in "static" folder! But still CSS and other images are not visible on the website!
The directory structure is like this:
python programs\
first_template.py
templates\
Tutorial_website.html
static\
tutorial_website.css
tutorial\
images\
...
What am I missing?
Edit: I managed to get the photos visible but CSS in still not applying instead of CSS and images both being in the same folder i.e. "Static"!
Try linking your CSS like this:
<link rel="stylesheet" href="{{ url_for('static', filename='tutorial_website.css') }}>
I want to login to https://student.amizone.net using Requests library in python but I am getting the error ERROR for site owner: Invalid domain for site key this error does not show when I open website through browser. How can I login?
this is my python code, that I have tried:
import requests
login_data = {
'_UserName': 'username',
'_Password': 'password'
}
headers = {
'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36',
'Accept':'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
'Accept-Encoding': 'gzip, deflate, br',
}
with requests.Session() as s:
url = 'https://student.amizone.net'
r1 = s.get(url, headers=headers)
r2 = s.post(url, data=login_data, headers = headers)
print(r1.text)
I have also tried: r1 = s.get(url, headers=headers, auth=HTTPBasicAuth('user','pass')) but got the same result(didn't login)
this is the response r1.text that i'm getting:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amizone</title>
<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/font-awesome.min.css" rel="stylesheet" />
<link href="/login-files/main.css" rel="stylesheet" />
<link href="/Content/owl.carousel.css" rel="stylesheet" />
<style>
#media(min-width:991px){
.login100-form {
left:420px;
}
.login100-pic {
right:420px;
}
}
</style>
</head>
<body>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<div class="logo-section">
<img src="/login-files/amizone-logo.png" />
</div>
<div class="widget-box login-box visible login100-form" id="login-box">
<span class="login100-form-title">
LOGIN <small> Student | Parent </small><br clear="all" />
<span>
<a href="https://amizone.net/adminamizone/index.aspx">
<b style="color:blue;">
Click here for admin login
</b>
</a>
</span>
</span>
<form action="/Login/Login" class=" validate-form" id="loginform" method="post" name="loginform"> <div class="wrap-input100 validate-input" data-validate="User Name is required">
<input autocomplete="off" class=" input100" data-val="true" data-val-required="User Name is required !!" name="_UserName" placeholder="User Name" type="text" value="" />
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div class="wrap-input100 validate-input" data-validate="Password is required">
<input autocomplete="off" class=" input100" data-val="true" data-val-length="Must be between 5 and 20 characters" data-val-length-max="20" data-val-length-min="5" data-val-required="Password is required !!" name="_Password" placeholder="Password" type="password" />
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock" aria-hidden="true"></i>
</span>
</div>
<div class="wrap-input100">
</div>
<div class="container-login100-form-btn">
<button type="submit" class="login100-form-btn">Login</button>
</div>
<div class="text-center p-t-12 fg-password">
<span class="txt1">
Forgot
</span>
<a href="#" class="txt2" data-target="#forgot-box">
Username / Password?
</a>
</div>
</form> </div>
<div class="widget-box forgot-box login100-form" id="forgot-box">
<span class="login100-form-title">
Password Recovery
</span>
<form action="/Login/ForgotPassword" class=" validate-form" id="ForgetForm" method="post" name="ForgetForm"><input name="__RequestVerificationToken" type="hidden" value="CIu-qUEXGRgcyZkrrLhEbz-8rIxUM2Vj8bZTqFeP96KoaLdnAX_COKuwy-6vm_HHZTdZd8dUCylFh8_Y5aWNJiJSD0RlGZgSz3i6yMPvWSQ1" /> <div class="wrap-input100 validate-input" data-validate="User Name is required">
<input autocomplete="off" class="input100" data-val="true" data-val-required="User Name is required !!" name="_UserName" placeholder="User Name" type="text" value="" />
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div class="wrap-input100">
<div class="g-recaptcha" data-sitekey="6LfVOEcUAAAAAFa_lQg8WJ-e_5qYNDnlmxSXL05S"></div>
</div>
<div class="container-login100-form-btn">
<button type="submit" class="login100-form-btn">Get Password</button>
</div>
<div class="text-center p-t-12 fg-password">
<span class="txt1">
Back
</span>
<a href="#" class="txt2" data-target="#login-box">
Login
</a>
</div>
</form> </div>
<div class="login100-pic">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<a href="https://www.amity.edu/asfd/" target="_blank">
<img src='/login-files/amizonedrama.jpg' data-zoom-image='/login-files/amizonedrama.jpg'>
</a>
</div>
<div class="item">
<a href="https://amity.edu/amimun/" target="_blank">
<img src='/login-files/AMIMUN20.jpg' data-zoom-image='/login-files/AMIMUN20.jpg'>
</a>
</div>
<div class="item">
<a href="http://amityfinishingschool.com" target="_blank">
<img src='/login-files/QSRanking.jpg' data-zoom-image='/login-files/QSRanking.jpg'>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="/Scripts/owl.carousel.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="/login-files/jquery.elevatezoom.js"></script>
<script src="/login-files/main.js"></script>
<!-- include the style -->
<link rel="stylesheet" href="/Content/alertifyjs/alertify.min.css" />
<!-- include a theme -->
<link rel="stylesheet" href="/Content/alertifyjs/themes/default.min.css" />
<script src="/Scripts/alertify.js"></script>
<script type="text/javascript">
$("#owl-demo").owlCarousel({
navigation: false, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
autoPlay: 3000,
});
jQuery(function ($) {
$(document).on('click', '.fg-password a[data-target]', function (e) {
e.preventDefault();
var target = $(this).data('target');
$('.widget-box.visible').removeClass('visible');//hide others
$(target).addClass('visible');//show target
});
});
</script>
<script>
$(".rank-image").elevateZoom({ constrainType: "height", constrainSize: 274, zoomType: "lens", lensShape: "round", lensSize: 100, containLensZoom: true, gallery: 'gallery_01', cursor: 'pointer', galleryActiveClass: "active" });
</script>
</body>
</html>
r2.text is the same.
this is how the site looks in the browser, it shows no reCAPTCHA:
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>