I'm trying to implement my 404.html page into my django project, and coming across this error. Everything else is complete in my project, so I'm eager to get this last piece done! any help is greatly appreciated. included the 404.html and head_css.html file. please let me know if you need to see anything else.
Can anyone help with this?
My 404.html code:
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="404 Page not found">
<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport">
<title>Codes For Anyone</title>
<link rel="shortcut icon" type="image/x-icon" href="{% static 'themes/images/favicon.ico' %}">
<!-- Google icon -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
{% include 'landing/head_css.html' %}
</head>
<body class="body-custom body-404page">
<div class="errorpage">
<div class="wrapper">
<div class="container">
<div class="content-primary">
<h1 class="title">Page Not Found</h1>
<p class="description">The page you are looking for was moved, removed, <br>
renamed or might never existed.</p>
<div class="section-footer">
Back To Homepage
Report Error
</div>
</div><!-- content-primary -->
</div><!-- container -->
</div>
</div>
<!-- chitika ad code -->
<div class=" container-fluid full-width-container contact">
<script type="text/javascript">
( function() {
if (window.CHITIKA === undefined) { window.CHITIKA = { 'units' : [] }; };
var unit = {"calltype":"async[2]","publisher":"andrewdiemer","width":550,"height":250,"sid":"Chitika Default"};
var placement_id = window.CHITIKA.units.length;
window.CHITIKA.units.push(unit);
document.write('<div id="chitikaAdBlock-' + placement_id + '"></div>');
}());
</script>
<script type="text/javascript" src="//cdn.chitika.net/getads.js" async></script>
</div>
<!-- end ad code -->
</div>
<!-- Scripts Starts -->
{% include 'landing/javascript.html' %}
<script>
$(document).ready(function() {
var sPath=window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
$(".pmd-sidebar-nav").each(function(){
$(this).find("a[href='"+sPage+"']").parents(".dropdown").addClass("open");
$(this).find("a[href='"+sPage+"']").parents(".dropdown").find('.dropdown-menu').css("display", "block");
$(this).find("a[href='"+sPage+"']").parents(".dropdown").find('a.dropdown-toggle').addClass("active");
$(this).find("a[href='"+sPage+"']").addClass("active");
});
});
</script>
<!-- Scripts Ends -->
</body>
</html>
head_css.html:
{% load staticfiles %}
<!-- Bootstrap css -->
<link rel="stylesheet" type="text/css" href="{% static 'assets/css/bootstrap.min.css' %}">
<!-- Propeller css -->
<!-- build:[href] assets/css/ -->
<link rel="stylesheet" type="text/css" href="{% static 'assets/css/propeller.min.css' %}">
<!-- /build -->
<!-- Propeller date time picker css-->
<link rel="stylesheet" type="text/css" href="{% static 'components/datetimepicker/css/bootstrap-datetimepicker.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'components/datetimepicker/css/pmd-datetimepicker.css' %}" />
<!-- Propeller theme css-->
<link rel="stylesheet" type="text/css" href="{% static 'themes/css/propeller-theme.css' %}" />
<!-- Propeller admin theme css-->
<link rel="stylesheet" type="text/css" href="{% static 'themes/css/propeller-admin.css' %}">
Related
Hello can someone help me resolve this issue. I tried the possible solutions of stackoverflow, but still I am getting error. I am a beginner in Flask. Removed some middle part of the code as I wasn't able to post it.
I am getting 404 error on few files:
My HTML template code is:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Indus HTML5 Free Responsive Template | Template stock</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='/css/bootstrap.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='/css/et-lineicon.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='/css/font-awesome.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='/css/style.css') }}" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,400italic,500italic,700' rel='stylesheet' type='text/css'>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Preloader -->
<div class="animationload">
<div class="loader">
Loading...
</div>
</div>
<!-- End Preloader -->
<!-- =========================
FOOTER
========================== -->
<footer class="footer">
<div class="container text-center">
<div class="row">
<div class="col-md-12">
<ul class="social list-inline">
<li class="social-btn" id="fb"><i class="fa fa-facebook"></i></li>
<li class="social-btn" id="tw"><i class="fa fa-twitter"></i></li>
<li class="social-btn" id="tbl"><i class="fa fa-tumblr"></i></li>
<li class="social-btn" id="pin"><i class="fa fa-pinterest"></i></li>
<li class="social-btn" id="flk"><i class="fa fa-flickr"></i></li>
</ul>
</div>
</div>
<div class="row">
<p class="copyright">Copyright© 2016 <a href="http://templatestock.co">Template Stock</p>
</div>
</div>
</footer>
<!-- JAVASCRIPTS -->
<script src="{{ url_for('static', filename='/js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='/js/jquery.lwtCountdown-1.0.js') }}"></script>
<script src="{{ url_for('static', filename='/js/jquery.stellar.min.js') }}"></script>
<script src="{{ url_for('static', filename='/js/jquery.nicescroll.min.js') }}"></script>
<script src="{{ url_for('static', filename='/js/animated.js') }}"></script>
<script src="{{ url_for('static', filename='/js/main.js') }}"></script>
</body>
</html>
My Directories:
Well you need to place the static folder in the main directory and not inside the template folder.
.\home
.\templates
- index.html
.\static
- css
- img
- fonts
- js
Html File
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}"/>
</head>
<body>
<h1>This is from index.html</h1>
{{help_me}}
<img src="{% static "images/DjangoGuitar.jpg" %}" alt="sorry text not loaded">
</body>
</html>
CSS file
h1{
color: red;
}
Output:
This is from index.html
Welcome to the page sorry text not loaded
Have you tried enclosing the css/style.css part in single quotes to see if it works? Like so <link href="{% static 'css/style.css' %}" rel="stylesheet">.
The double quotes at "css/style mean you have closed the first one beginning at href="{%
How To use the audio file of the local system to play in django?
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link href="{% static 'css/result_style.css' %}" type="text/css"
rel="stylesheet"/>
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="container" align="center"><br><br><br>
{% load custom_filters %}
<h2>{{summary}}</h2>
<br>
This part is working fine while playing this part in simple html code
<p>Click on the audio To Listen Your Summary</p>
<audio controls>
<source src="D:\textanalysis\audio_file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div>
</body>
</html>
I have a Flask application I have built locally and have hit the wall as to having javascript with npm packages being able to be used because I am consuming REST APIs and using jQuery per my application. I followed the advice here and have Webpack working.
I ran the command npm run watch
webpack --progress -d --config webpack.config.js --watch
0% compiling
Webpack is watching the files…
Version: webpack 2.1.0-beta.21
Time: 4836ms
Asset Size Chunks Chunk Names
bundle.js 5.97 MB 0 [emitted] main
[366] ./js/index.js 15.3 kB {0} [built]
+ 366 hidden modules
So now I have webpack working with my index.js file and I have the Flask app being served using gunicorn and Docker on 5000.
Everything is working, but my JS is still unresponsive in my Flask application.
Does anyone know what I do to have my index.js file to work per this Flask app with these components I have, or what I am doing incorrectly here?
Here is my html template, rendering just fine. Just not any Javascript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description"
content="{% block meta_description %}{% endblock %}">
<title>{% block title %}{% endblock %}</title>
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/bootstrap.min.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/main.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/style.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/watson.css') }}">
<link
rel="stylesheet"
href="{{ url_for('static', filename='styles/vendor/font-awesome.min.css') }}">
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="{{ url_for('page.home') }}">
</a>
</div>
</div>
</nav>
<main class="container">
<div class="md-margin-top">{% block heading %}{% endblock %}</div>
{% block body %}{% endblock %}
</main>
<footer class="footer text-center">
<div class="container">
<ul class="list-inline">
<li class="text-muted">2018</li>
<li>NMT</li>
<li>How it works</li>
</ul>
</div>
</footer>
<script
src="{{ url_for('static', filename='scripts/vendor/bootstrap.min.js') }}">
</script>
<script src="{{ url_for('static', filename='js/bundle.js') }}"></script>
<script src="{{ url_for('static', filename='node_modules/watson-developer-cloud/v2.js') }}"></script>
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
</body>
</html>
The parts involved in the question: https://jsfiddle.net/cgnws2u3/3/
Error Logs
I updated filepath and now get this per my js files I am trying to link to my project:
Uncaught ReferenceError: require is not defined
at v2-generated.ts:17
Make sure that your Flask project structure contains static folder as per Flask documentation.
According to the relative bundle.js file path in index.html template, your static directory should contain js directory. Make sure you have it there after using webpack and it contains your bundle.js, index.js and the rest of files mentioned in your template.
I am working with a django template. the head of the template is:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Landing Page - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS -->
{% load staticfiles %}
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{% static "css/landing-page.css" %}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="{% static "font-awesome-4.2.0/css/font-awesome.min.css" %}" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
My view contains:
def index(request):
t = loader.get_template('app1/index.html')
c = RequestContext(request, {})
return HttpResponse(t.render(c),content_type="application/xhtml+xml")
How can I fix the error in the screenshot?
This is not a valid XML tag:
<link href="{% static "css/landing-page.css" %}" rel="stylesheet">
Instead, it should be:
<link href="{% static "css/landing-page.css" %}" rel="stylesheet" />
This is because, according to XML specs, any tag has to be either closed with its pair or self-closed by including slash (/) at the and of opening tag.
Most browsers understand this, but, speaking strictly, this is incorrect.
Also, if you have any <hr>, <br> or similar single tags, you'll have to fix them all as well, i.e. <hr />, <br />
See this list: http://xahlee.info/js/html5_non-closing_tag.html.