This question already has an answer here:
flask can not read static path and load Javascript files
(1 answer)
Closed 7 years ago.
I'm making a website using python with the flask framework and I can't seem to get my javascript page to work with the html the same way I did with my external css file. I'm not sure where the error is occurring, whether it's in my html head (below) where i'm linking the javascript, in the javascript file or in the python file.
<head>
<meta charset="UTF-8">
<link rel = "stylesheet" type="text/css" href="../static/HotelStyle.css">
<title> Hotel </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="../static/hotel.js"></script>
<script type="text/javascript"></script>
</head>
if you've defined your static directory correctly for flask you should be able to use the correct url for your static files by using url_for. for example in this case it will be:
<head>
<meta charset="UTF-8">
<link rel = "stylesheet" type="text/css" href="{{ url_for('static', filename='HotelStyle.css') }}">
<title> Hotel </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="{{ url_for('static', filename='hotel.js') }}"></script>
<script type="text/javascript"></script>
</head>
Related
HELP ME PLEASE 🙏🙏🙏🙏🙏
im new into inertia.js
CSS FILE WORKING BUT JS FILE NOT WORKING
iam using inertia.js with laravel 9 with vue.js-3
using admin html template im bulting admin dashboard but im facing problem with js file it was not working but when i used normal laravel 9 with blade.php concept it work perfectly.
so i tryied from 2 days with different paid admin templets but it was not working
help me to fix it
i tried below methods but not working
MY
my code
APP.BLADE.PHP FILE
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- //css -->
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<!-- //js -->
<script src="{{URL::asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/us-merc-en.js')}}"></script>
<!-- Scripts -->
#routes
#vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
#inertiaHead
</head>
<body class="font-sans antialiased">
#inertia
</body>
</html>
I TRYID THIS METHOD ALSO
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<script src="assets/libs/jsvectormap/js/jsvectormap.min.js"></script>
<script src="assets/libs/jsvectormap/maps/world-merc.js"></script>
<script src="assets/libs/jsvectormap/maps/us-merc-en.js"></script>
METHOD 2
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<script src="{{URL::asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/us-merc-en.js')}}"></script>
I have solution to this, so rather than adding the js and css in the app.blade.php file, move asset folder resources folder.
Import the all css file in app.css like as
//resources/css/app.css
#import '../assets/css/dashlite.css?ver=3.1.1';
#import '../assets/css/theme.css?ver=3.1.1';
same import the all js file in app.js like as
//resources/js/app.js
import("../assets/libs/jsvectormap/js/jsvectormap.min.js");
import("../assets/libs/jsvectormap/maps/world-merc.js");
import("../assets/libs/jsvectormap/maps/world-merc.js");
Now in app.blade.php add css and js inside the vite directive
#vite(['resources/js/app.js', 'resources/css/app.css',
"resources/js/Pages/{$page['component']}.vue"])
May this will help you. Happy coding
I am a first grade CS student in university.After learning some of the basics of React.js. I am trying to understand a resume project. Can anyone tell me why the app.js and index.js are empty here. I wonder how the styling is accomplished...I spotted classname attributs inside jsx elements of the components but i can't find related css file in the src folder, could it be inside public folder then? Besides answering me questions, feel free to point out what kind of React topics/techniques I need to learn about in order to understand better how the styling works here.
The project repository by nordicgiant2: https://github.com/nordicgiant2/react-nice-resume
I have checked topic like how the styling working for component in React.js and the direct anwser haven't been found.
The styling turns to be inside the public folder, and when check the index.html file inside the public folder I realize the link tag points toward to the css file inside the public folder. My original assumption was that, the styling sheet should be place inside the src folder as the TUTORIAL said.
Below is a snippet of the inde.html of this project which reveal the answer.
<!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="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="%PUBLIC_URL%/css/default.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/layout.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/media-queries.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/magnific-popup.css">
<title>Nordic Giant Development</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/magnific-popup.js"></script>
<script src="js/init.js"></script>
</body>
</html>
I am currently working on a project using Django, and I am having a weird problem with my script tags.
I have a layout.html file in which I have included Jquery and Bootstrap in the head. Using jinja, I am extending layout.html for my new file, main.html. In my new file I am now including a new script because this script is peculiar to this page.
The problem I am having is that this new script does not work in main.html unless I again include Jquery in inside main.html. Please, I would like to know if there is an explanation for this? or maybe I am missing something?
layout.html file
<html>
<head>
// script to include jquery here, version 3.3.1
// other scripts include, bootstrap.js, popper.js, knockout.js
</head>
<body>
{ block content % }
{ % endblock % }
</body>
</html>
Sample of main.html
main.html
{ % extends "layout.html" %} {% block content %}
// This new script below only works if jquery is included here
// new script here
<div> </div>
{% endblock %}
I am also using knockout.js, from which I am calling functions in new script on document load. The new script requires Jquery, But I don't understand why it's not finding the jquery unless its included in the same file. The I also get and error when I include JS in the main.html file because jquery should be included before bootstrap.js.
Please, I would be happy if anyone has encountered similar problems or if anyone can explain this to me.
This is the head for layout.html:
<head>
<title>Suggesto</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- font awesome-->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
/>
<!-- Js-cookie-->
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2/src/js.cookie.min.js"></script>
<!--Jquery-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"
></script>
<!-- Popper.js-->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"
></script>
<!-- Bootstrap.js-->
<script src="/static/bootstrap/js/bootstrap.js"></script>
<!-- Font -->
<link
href="https://fonts.googleapis.com/css?family=Noto+Serif+SC|Open+Sans|Quicksand|Montserrat"
rel="stylesheet"
/>
<!--Knockout.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
{% load staticfiles %}
<link
rel="stylesheet"
href="/static/bootstrap/css/bootstrap.css"
type="text/css"
/>
<link rel="stylesheet" href="/static/css/mainpage.css" type="text/css" />
</head>
The main.html starts like this
{%extends "mainpage/layout.html" %} {% block content %}
<script src="/static/js/jquery.session.js"></script>
<link
rel="stylesheet"
href="/static/css/star-rating.min.css"
media="all"
type="text/css"
/>
<script src="/static/js/star-rating.min.js"></script>
<script src="/static/js/suggest.js"></script>
<link rel="stylesheet" href="/static/css/suggest.css" type="text/css" />
<!-- Start -->
<div class="container" id="Page">
It ended up being a function from Knockoutjs:
ko.cleanNode( )
I don't know what this function does under the hood, something to look at. Feel free to provide more details if you know more.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to determine the best way to go about importing a head.html file into the <head> tag for every webpage. I want to do this so that all resources are located in one file, to minimize bloat in other files, and also to provide an import for the header/footer on every page.
head.html
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sample</title>
<link rel="icon" type="image/png" href="images/sample.png">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Andada" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="css/bootstrap-social.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="scripts/jquery-2.1.4.min.js"></script>
<script>
$(function () {
$("header").load("header.html");
$("footer").load("footer.html");
});
</script>
I've already considered JavaScript loading, but it's bad practice to import a JavaScript file right off the bat. Running the site through Google's PageSpeed Insights, it's suggested that you "Remove Render-Blocking JavaScript".
index.html head tag w/ JavaScript
<head>
<script type="text/javascript" src="scripts/jquery-2.1.4.min.js"></script> <!-- Blocking JavaScript -->
<script>
$(function () {
$("head").load("head.html");
});
</script>
<head>
I've also tried using HTML imports. This seems to work alright on desktop, other than the fact that an import brings in a full HTML document when rendered, wrapping the contents of my file in <html><head><body> tags. This is annoying and it is non-functional on my Android phone.
Rendered index.html head tag w/ HTML import
<head>
<link rel="import" href="head.html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sample</title>
<link rel="icon" type="image/png" href="images/sample.png">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Andada" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="css/bootstrap-social.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="scripts/jquery-2.1.4.min.js"></script>
<script>
$(function () {
$("header").load("header.html");
$("footer").load("footer.html");
});
</script>
</head>
<body></body>
</html>
</head>
JQuery is a terrible way to load the header content!!
You should be looking at PHP if you save your .html documents as .php
Then include these into the page using PHP includes in your index.php files.
index.php example:
<?
include('header.php');
<div>body content here</div>
include('footer.php');
?>
This depends upon what server-side language your server is running. If it's php, then do
<html>
<head>
<?php include('path_to_file/head.php'); ?>
</head>
<body>
</body>
</html>
You could also use include_once, require, or require_once instead. If your server is running something other than php, then you will have to use whatever the equivalent is in its language. If you have no access to the server and are running a completely static site, like off of Dropbox, Google Drive, or S3, then the best option I know of, if you have only a small amount of content, is to not include files but just run everything off of one base page with content that is hidden and displayed with javascript.
I have build a web site and for one of my pages I have some jQuery elements [start button, progress bar]. I'm implementing a javascript timer into the page and when I place the javascript info into the header, the jQuery no longer works. How do I avoid this problem? Thanks
jQuery Works/Javascript Doesn't Work
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'livestream/css/style.css' %}" />
<!DOCTYPE html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script type="text/javascript" src="{% static 'livestream/jquery- timer/res/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/jquery.timer.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/res/demo.js' %}"></script>
<html>
<head>
<style>
.progressInfo {
margin-left: leftmargin;
}
</style>
<meta charset="utf-8" />
<title>Main</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="{% static 'livestream/css/style.css' %}" />
jQuery Doesn't Work/Javascript Works
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'livestream/css/style.css' %}" />
<!DOCTYPE html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<html>
<head>
<style>
.progressInfo {
margin-left: leftmargin;
}
</style>
<meta charset="utf-8" />
<title>Main</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/res/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/jquery.timer.js' %}"></script>
<script type="text/javascript" src="{% static 'livestream/jquery-timer/res/demo.js' %}"></script>
<link rel="stylesheet" href="{% static 'livestream/css/style.css' %}" />
First I'd get your basic <html> in order. I try to always use something like...
<!DOCTYPE html>
<html>
<head>
<meta>
<title>
<script></script>
<link>
</head>
<body>
</body>
</html>
Then, load jQuery and then any jQuery scripts (don't forget to use minifed versions). Make sure you are loading only one version of jQuery and if a script you are using does not comply with the version you are currently running then upgrade jQuery or the script (whichever is older.) As #Antti Happala mentioned, multiple instances of jQuery will surely cause issues.
The other thing I do while in development is use local versions of .js and .css files until I know everything is working properly then I transition to hosted versions, retest then go live.
So, I would try something like (from your first example)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Main</title>
<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.timer.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/newCustomCSSFileForYourSpecificCSS.css" />
</head>
<body>
<!-- Your good stuff here -->
</body>
</html>
http://html5boilerplate.com/ is a good place to look for examples
All of the .js files would be downloaded into a local js folder and all of the .css files would be kept locally in a css folder (again, you can change to hosted version when going live.) Make sure you only reference any .js or .css file once and combine and minify when/where possible.
Finally, make sure your .js files all work off of the same version of jQuery. If that does not work start checking firebug/chrome dev tools, etc for errors.
You are loading 2 jqueries on the same page, and possibly different versions, so surely things will go silly; also the script tags should be in head and certainly not before the <!DOCTYPE>