I have an HTML file named showMap.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Map</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="js/map.js"></script>
</head>
<body onload="showPosition()">
<div id="map_canvas" style="width:500px;height:500px;"></div>
</body>
</html>
And another JavaScript file map.js is placed in the js folder of the same directory.
This code works fine when the HTML file is loaded, but this does not work when I run it in the server.
I use Python's Flask framework for back-end programming and the funny thing is that the same thing will work well if I expand the JavaScript code inside the HTML file. The only problem is with the external file.
Serve the map.js file as a static resource:
move the file to a static/ subdirectory of your package
generate a static URL for it in a Jinja2 template like so:
<script type="text/javascript"
src="{{ url_for('static', filename='map.js') }}"></script>
The filename parameter takes a relative path; you can use subdirectories was needed.
Step 1:
Create folder with name static on project root
Step 2:
Add static files in static folder
Step 3
Add in template
<script type="text/javascript" src="{{ url_for('static', filename = 'hello.js') }}"></script>
I experience the same issue, for stylesheet, the URL_FOR works but for javascript.
I had to write
<script type="text/javascript" src="static/map.js"/>
It worked for me
I want to add to Martijn's answer, that you have to link your js file exactly like this:
<script type="text/javascript" src="{{ url_for('static', filename='map.js') }}"></script>
and not like this:
<script type="text/javascript" src="{{ url_for('static', filename='map.js') }}"/>
Related
I'm working in a Django project and I would like to have it tidy. Thus I decided (among other things) don't have de css styles and js scripts inside the html templates. With the css styles I have no problems, I have created a css folder inside the static folder and I save all my css files inside, it works perfectly.
My problem comes when I want to do the same with the js files that works with the python variables that comes from the views.py. Because it don't recognise they. How can I import this variables to the js external files?
Now I have this, but it don't works.
main.html
{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
<title> {% block title%}{% endblock%} </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="{% static "/css/main.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "/css/data.css" %}">
</head>
<body>
<h1> WELCOME HOME </h1>
<p>{{Data}}</p>
/* This script has to be in a external js file. HERE WORKS
<script>
alert('{{Data}}');
</script>*/
{% block content %}{% endblock%}
<script type="text/javascript" src="{% static "/js/data.js" %}"></script>
</body>
</html>
data.js
alert('{{Data}}')
//alert({{Data}}) ERROR
If the alert has no python variables like alert("Hello world") it works well, but when I pass a Python variable it shows '{{Data}}'.
Thank you!
we can do this in two ways..
1.
add the below line in your html file
{{ value|json_script:"mydata" }}
and fetch the above value to data.js file as below
var value = JSON.parse(document.getElementById('mydata').textContent);
2.
add the following tag at the below of this line
<script type="text/javascript">
var data= '{{ data }}'
</script>
<script type="text/javascript" src="{% static '/js/token.js' %}">
</script>
and you can fetch it like as usual javascript variable as follows
in data.js file
alert(data);
you can pass it through function
try this
html :
demo({{var}})
js :
demo(var){
alert(var)
}
hope it helps
I have created a simple website and a corresponding javascript file. When I open the site in any browser, it works fine. The script gets executed and there are no errors.
Then I tried to convert my website to a web-app using Electron. For now I didn't change anything, and added only a package.json and a main.js file, as described in Electron's getting started guide.
When opening the app, I can see my website just fine. But there is alsoan error popping up:
ReferenceError: $ is not defined
This comes from my javascript file:
$(document).ready(function() {
setInterval(doStuff, INTERVAL_MS);
});
So my question is:
Why did this code work when I run the site directly in the browser?
And why the error when I run it via Electron?
PS:
This how my index.html's head looks like. As you can see jQuery is included.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Style sheets -->
<link rel="stylesheet" href="style.css" />
<!-- External libraries -->
<script type="text/javascript" src="js/libs/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="js/libs/knockout-3.4.0.js"></script>
<!-- Internal scripts -->
<script type="text/javascript" src="js/globals.js"></script>
<script type="text/javascript" src="js/viewModel.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/dummyDataProvider.js"></script>
<script type="text/javascript" src="js/switcher.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
Append your index.html with the following script and make sure the path is correct for your case:
<script>
window.$ = window.jQuery = require('./js/libs/jquery-2.2.0.min.js');
</script>
--public/javascripts/myscript.js
--views/index.ejs
No matter what I do, or what variation I use (ie declaring including type="text/javascript") it wont find my external js file. I am using node js and I was told I may have to do something with routing, but that doesn't seem to be working either.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<!-- <link rel='stylesheet' href='/stylesheets/style.css' />-->
</head>
<body>
<%include templates/header.ejs %>
<script type="text/javascript" src=".../public/javascripts/myscript.js"> </script>
</body>
</html>
I understand using routing in other .js files but not importing into html.
Also is there a better/neater was of doing this?
you base directory for adding static file, start from public
ex.
your project directory
/var/www/project/
your assets located on
/var/www/project/public/javascripts
then you attach theme as bellow
//app.js
app.use(express.static(path.join(__dirname, 'public')));
and on views you can do as bellow
<script type="text/javascript" src="/javascripts/myscript.js"> </script>
I have no much idea about web programming, I am looking for some way to create header file for javascript and css whether its possible ?
here is scenario, assume I have 100s of javascript and css if I have to create html or php script everytime I have to put these line
<script type="text/javascript" src="../src/jquery.1.js"></script>
<script type="text/javascript" src="../src/jquery.2.js"></script>
...
...
<script type="text/javascript" src="../src/jquery.100.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery.1.css" />
<link rel="stylesheet" type="text/css" href="../jquery.2.css" />
...
...
<link rel="stylesheet" type="text/css" href="../jquery.100.css" />
I want to create only one file which contains all javascript and css, and their path and then want to include it in html like this, I expect something kind of C
include 'all_java_css'
<html>
<body>
<p> all included</p>
</body>
</html>
Use include() php function for this purpose, what you will have to do is.
Make a php file and put the scripts file into this file, and include that php file in your file where you need to include js files,
Suppose you made a php file example.php with js files.
example.php
<script type="text/javascript" src="../src/jquery.1.js"></script>
<script type="text/javascript" src="../src/jquery.2.js"></script>
home.php
//with this line you are including all above js files into home.php
inlcude(example.php);
First of all, if you can try and put as many of them files into one, that would be better. Instead of calling 100 of each, you could only call a few, making run times faster.
Also, add all this scripts to a .html or .php file for example:
<script type="text/javascript" src="../src/jquery.1.js"></script>
<script type="text/javascript" src="../src/jquery.2.js"></script>
and save it as header.html.
Then in your main file, you can do this:
<html>
<head>
<?php include('header.html'); ?>
</head>
<body>
...
</body>
</html>
You need to make sure that your main file is 1) a .php extension and 2) can actually run PHP.
Second of all, you need to make sure header.html is in the same directory as index.php or whatever the php file is.
If not, you can always use
<?php include('inc/header/all_java_css.html');?>
If you do not have PHP, you can do this:
In the head:
<head>
<meta name="add">
</head>
Then using jQuery:
$('meta[name="add"').load('all_java_css.html');
CSS files can be imported from a single CSS file like this:
#import "newstyles1.css";
#import "newstyles2.css";
#import "newstyles3.css";
JS is a bit more tricky, but maybe this can help? How to include js file in another js file?
You could compile both .js and .css files...
Javascript - Closure tools
https://developers.google.com/closure/compiler/
CSS - LESS.org
http://lesscss.org/
By compiling both types you could import 2 files do your page.
i think this is better way for you, because if you put more js file in header then make some error, so you will put js file in footer
header.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="../jquery.1.css" />
<link rel="stylesheet" type="text/css" href="../jquery.2.css" />
...
...
<link rel="stylesheet" type="text/css" href="../jquery.100.css" />
</head>
<body>
footer.php
<script type="text/javascript" src="../src/jquery.1.js"></script>
<script type="text/javascript" src="../src/jquery.2.js"></script>
...
...
<script type="text/javascript" src="../src/jquery.100.js"></script>
</body>
</html>
main.php
<?php
include 'header.php';
?>
// do code for content
<?php
include 'fotter.php';
?>
In a web page I am developing, I am trying to include two javascript files. the code looks like this:
<head>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="cache-control" content="no-cache"/>
<link rel="stylesheet" type="text/css" media="all" href="/configaudit-portlet/css/dynamicJSTable/gridtable.css" />
<link rel="stylesheet" type="text/css" media="all" href="/viper-theme/css/universal_buttons.css" />
<script type="text/javascript" src="/configaudit-portlet/js/dynamicJSTable/configaudit_gridtable.js"></script>
<script type="text/javascript" src="/configaudit-portlet/js/dynamicJSTable/configaudit_gridtable_nextPrevious.js"></script>
<script type="text/javascript>
function blah(){
.
.
.
The files are suppose to add additional formatting to tables that are loaded onto the page. I have used these files in the past on different pages with no problem at. I can load the jsp that creates the table with the files included with no problems. Nothing in the file has change only the file/path names which I have checked over and over and nothing seems to be wrong.
Does anyone have any idea why this is happening?
Are your files located at the root of your domain? The way you have it right now, the files will be searched for at the root. If you remove the leading '/''s in your src definitions, they will be relative urls and files will be searched for in the same directory as your .html file.
All I can say is there is definately something wrong with your path to the js files.
What do you mean when you say that you checked over the paths?
Figure out your correct path of the js files, as you are saying that you changed the file/path names.
End quote is missing in the inline block: <script type="text/javascript">
Have you tried:
<script type="text/javascript" src="/js/dynamicJSTable/configaudit_gridtable.js"></script>
<script type="text/javascript" src="/js/dynamicJSTable/configaudit_gridtable_nextPrevious.js"></script>
Or maybe, on the top of the page
<%#taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
And something like this:
<script type="text/javascript" src="<c:url value="/js/dynamicJSTable/configaudit_gridtable.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/dynamicJSTable/configaudit_gridtable_nextPrevious.js"/>"></script>