I have a Flask app that I am using to serve a D3 visualization on Heroku. I have the visualization working here: http://wsankey.github.io/dew_mvp/ and the Heroku app here: https://dew.herokuapp.com/. The problem is that I have static json data that is not being picked up by my javascript--there's not even an error being thrown. The map data is 'us.json' and my data is 'dewmvp1.json.'
Here is the relevant piece of the D3 javascript file:
$(document).ready(function() {
//Reading map file and data
queue()
.defer(d3.json, "/static/us.json")
.defer(d3.json, "/static/dewmvpv1.json")
.await(ready);
And my app.py file where I thought I might route the data:
from flask import Flask, render_template
app = Flask(__name__)
#Main DEW page
#app.route('/')
def home():
return render_template("index.html")
#About page
#app.route('/about')
def about():
return render_template("about.html")
#Sending the us.json file
#app.route('/usmap/')
def usmap():
return "<a href=%s>file</a>" % url_for('static', filename='us.json')
#Sending our data
#app.route('/data/')
def data():
return "<a href=%s>file</a>" % url_for('static', filename='dewmvp1.json')
if __name__ == '__main__':
app.run(debug=True)
And the relevant pieces of the index.html where my script.js is being loaded (to give you an idea of how I'm loading it):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="http://d3js.org/queue.v1.min.js" type="text/javascript">
<link href="{{url_for('static', filename='topojson.v1.min.js')}}" type="text/javascript">
<link href="{{url_for('static', filename='underscore-1.6.0.min.js')}}" type="text/javascript">
<link href="{{url_for('static', filename='jquery-1.10.2.min.js')}}" type="text/javascript">
<link href="{{url_for('static', filename='jquery-ui-1.10.4.js')}}" type="text/javascript">
<link href='https://fonts.googleapis.com/css?family=Arvo:400,700|PT+Sans+Caption' rel='stylesheet' type='text/css'>
<link rel="stylesheet" media="screen" href="{{url_for('static', filename='jquery-ui-1.10.4.css')}}">
<link rel="stylesheet" media="screen" href="{{url_for('static', filename='grid.css')}}">
<link rel="stylesheet" media="screen" href="{{url_for('static', filename='layout.css')}}">
<link rel="stylesheet" media="screen" href="{{url_for('static', filename='map.css')}}">
<link rel="stylesheet" media="screen" href="{{url_for('static', filename='normalize.css')}}">
<link rel="stylesheet" media="screen" href="{{url_for('static', filename='elements.css')}}">
<link rel="stylesheet" media="screen" href="{{url_for('static', filename='typography.css')}}">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<link href="{{url_for('static', filename='d3.min.js')}}" type="text/javascript">
Thank you!
What was happening here was that I using in my index.html when I should have been using . The javascript files were being linked but not executed. #user2569951 was definitely right to say that I needed that {{url_for() }} syntax to access the data but the real issue was more basic. Specifically where I had:
<link href="{{url_for('static', filename='d3.min.js')}}" type="text/javascript">
I needed instead:
<script src="{{url_for('static', filename='d3.min.js')}}"></script>
That was such a head banger for me but I certainly learned the difference between the tags. This fundamental knowledge is required when managing these files.
in your javascript you need to set your map the following way for it to be accessible.
$(document).ready(function() {
//Reading map file and data
queue()
.defer(d3.json, "{{url_for('static', filename='us.json')}}")
.defer(d3.json, "{{url_for('static', filename='dewmvpv1.json')}}")
.await(ready)
Related
I am trying to create simple HTML reports using Panel and Plotly and push them in an app, however the app refuses the reports because of some external links.
The following simple code shows you these unwanted links.
import panel as pn
tabs = pn.Column()
file_name = "my_file.html"
tabs.save(file_name)
Produces a HTML file containing these links
<title>Panel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf#3/notyf.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/#holoviz/panel#0.13.1/dist/css/dataframe.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/#holoviz/panel#0.13.1/dist/css/json.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/#holoviz/panel#0.13.1/dist/css/alerts.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/#holoviz/panel#0.13.1/dist/css/loading.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/#holoviz/panel#0.13.1/dist/css/markdown.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/#holoviz/panel#0.13.1/dist/css/card.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/#holoviz/panel#0.13.1/dist/css/debugger.css" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/#holoviz/panel#0.13.1/dist/css/widgets.css" type="text/css" />
<style>
How can I remove them ?
Why would I need them ?
I have looked at the doc of Panel but didn't find any relevant parameters that might help me to remove thse...
I would consider using BeautifulSoup for this task.
from bs4 import BeautifulSoup
soup = BeautifulSoup(html)
for m in soup.find_all('link'):
m.replaceWithChildren()
print soup
I'm writing a site for Flask and faced the problem that the css-file does not connect to the project
This is HTML-file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css'>
<link type="text/css" href="{{url_for('static', filename='css/main.css')}}" rel="stylesheet" />
This is CSS-file:
body {
background: red;
}
But the color never appeared on the site
What you should do is, if your static file is in templates file remove it from templates and do that:
from flask import Flask, render_template
css_file = "static/styles/style.css"
app = Flask(__name__)
#app.route("/")
def home():
return render_template("index.html", css_link = css_file)
then in your head tag you add:
<link rel="stylesheet" href="{{css_link}}" type="text/css"/>
Don't forget to add a body tag!
You need to add <body></body> to your html document
I have created a django project and tried to use an HTML template; however, I get an error while accessing files in static folder.
Here is my configuration:
#BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIR = [
os.path.join(BASE_DIR,'static'),
]
STATIC_ROOT = os.path.join(BASE_DIR,'assets')
I have added static variable at the top of the HTML file as:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Travello</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Travello template project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'styles/bootstrap4/bootstrap.min.css' %}">
<link href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/owl.carousel.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/owl.theme.default.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'plugins/OwlCarousel2-2.2.1/animate.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/main_styles.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/responsive.css' %}">
.....(cont'd)
The following is my folder configuration:
-my_project
--assets
--my_project
--static
--templates
--travello
My problem is that:
I cannot access images in static folder from browser, that is, when I type http://127.0.0.1:8000/static/images/about_1.jpg, I get an error like Page not found (404)
When I type http://127.0.0.1:8000 in order to see the index.html main page, I get the page with lots of errors saying Failed to load resource: the server responded with a status of 404 (Not Found)
Could you please help me in order to solve this issue. I will be glad to here your answers, thanks.
First of all, run python manage.py collectstatic, to copy all project's static files to your STATIC_ROOT dir - this should solve your second issue.
The first one is caused by incorrect URL address. You have set STATIC_ROOT to 'assets' dir, but you try to get access to the image entering /static/images/about_1.jpg. Just try /static/assets/about_1.jpg or /static/assets/images/about_1.jpg if images dir actually exists
Hello i dont know why the jquery is not loading in my flask app ? even though i have downloaded the jquery and add in js folder
<!DOCTYPE html>
<html lang="eng">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="{{url_for('static', filename = 'css/bootstrap.min.css')}}" rel="stylesheet">
<link rel="shortcut icon" href="{{url_for('static', filename = 'myicon.ico' )}}">
<script type=text/javascript src="{{url_for('static', filename='js/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{url_for('static', filename = 'js/bootstrap.min.js')}}"></script>
type=text/javascript should be type="text/javascript" in line referencing jQuery.
I have to download and save the webpages with a given URL. I have downloaded the page as well as the required js and css files. But the problem is to change the src and href values of those tags in the html source file as well to make it work.
my html source is :
<link REL="shortcut icon" href="/commd/favicon.ico">
<script src="/commd/jquery.min.js"></script>
<script src="/commd/jquery-ui.min.js"></script>
<script src="/commd/slimScroll.min.js"></script>
<script src="/commd/ajaxstuff.js"></script>
<script src="/commd/jquery.nivo.slider.pack.js"></script>FCT0505
<script src="/commd/jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/fonts/stylesheet.cssFCT0505"/>
<link rel="stylesheet" type="text/css" href="/commd/stylesheet.css"/>
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="/commd/stylesheetIE.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="/commd/accordion.css"/>
<link rel="stylesheet" href="/commd/nivo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/commd/nivo-slider.css" type="text/css" media="screen" />
I have found out all the links of css and js files as well as downloaded them using :
scriptsurl = soup3.find_all("script")
os.chdir(foldername)
for l in scriptsurl:
if l.get("src") is not None:
print(l.get("src"))
script="http://www.iitkgp.ac.in"+l.get("src")
print(script)
file=l.get("src").split("/")[-1]
l.get("src").replaceWith('./foldername/'+file)
print(file)
urllib.request.urlretrieve(script,file)
linksurl=soup3.find_all("link")
for l in linksurl:
if l.get("href") is not None:
print(l.get("href"))
css="http://www.iitkgp.ac.in"+l.get("href")
file=l.get("href").split("/")[-1]
print(css)
print(file)
if(os.path.exists(file)):
urllib.request.urlretrieve(css,file.split(".")[0]+"(1)."+file.split(".")[-1])
else:
urllib.request.urlretrieve(css,file)
os.chdir("..")
Can anyone suggest me the method to change(local machine path) the the src/href texts during these loop executions only which will be great help.
This is my first task of crawling.
Reading from the documentation:
You can add, remove, and modify a tag’s attributes. Again, this is done by treating the tag as a dictionary:
So writing something like:
l["src"] = os.path.join(os.getcwd(),foldername, file)
instead of
l.get("src").replaceWith('./foldername/'+file)
I believe will do the trick