--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>
Related
I have a .net core project where the css, js and images are in different folders.
The index.cshtml is in "\TechBlog.Web\Views\Home"
I'm trying to call the CSS and JS files from Index.cshtml. However, its not loading.
#{
ViewData["Title"] = "Home Page";
}
<!DOCTYPE html>
<html lang="en">
<head>
//Load CSS
<link rel="stylesheet" href="../css/all.css">
</head>
<body>
//Load JS
<script src="../js/Jquery3.4.1.min.js"></script>
</body>
Please note that, there other line of codes. However, I just looking at, what I'm doing wrong for providing path.
I have added my JS and CSS files into WWWroot and using Visual Studio code. However, I don't see the files added in the folder getting reflected in the Visual Studio code explorer.
Am I providing the path incorrectly? Or there is something wrong? Thanks.
you should use this:
<link rel="stylesheet" href="../../css/all.css">
Or
<link rel="stylesheet" href="~/~/css/all.css">
you most change default static folder from wwwroot to root in startup.cs > Configure :
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(env.ContentRootPath),
RequestPath = "/"
});
then :
<link rel="stylesheet" href="~/css/all.css">
Basic html page. Just starting and downloading packages. Checking if my Semantic UI setup is properly installed, but when I open up my index.html page and check the console I get 'GET file:///semantic/dist/semantic.min.css net::ERR_FILE_NOT_FOUND', along with 'GET file:///semantic/dist/semantic.min.js net::ERR_FILE_NOT_FOUND'. Which is strange!
These are my script tags within my head tag inside my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 boilerplate – all you really need…</title>
<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/semantic/dist/semantic.min.css"
/>
<script src="/semantic/dist/semantic.min.js"></script>
</head>
<body id="home">
<h1>HTML5 boilerplate</h1>
</body>
</html>
I can click on the relative paths in both tags and it will take me to the actual file in my editor.
My current folder structure is:
Semantic
dist
semantic.min.css
semantic.min.js
index.html
What gives?
Try ./semantic/dist/semantic.min.css
Perhaps I am missing something, but here is my problem:
after running gulp dist to go on "production mode", all javascript files are bundled ok but in the index.html there are still references to jspm_packages folder and also to some of the JavaScript files as follows:
<head>
<link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap#3.3.4/css/bootstrap.css"/>
<link rel="stylesheet" href="build/css/main.css"/>
</head>
<body>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('build/js/main.js!jsx');
</script>
</body>
all those references are no longer exists in dist folder, which is created in the gulp dist task.
Here is a use case example from one of React+JSPM projects on GitHub: https://github.com/tinkertrain/jspm-react
This behaviour is common to a many projects which I've encountered, so probably I am missing something...
Should I configure something to make some adjustments? maybe calling another task to create my own "production mode" html?
Cheers
You have to process your html and replace all those <link> and <script> with the production ones. There are arguably many ways and tools to do it, but as you say you're using Gulp you might want to check Gulp-html-replace.
Basically the idea is to add some html comments that instruct your chosen tool to replace those tags with the production ones. In your case
<head>
<!-- build:css -->
<link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap#3.3.4/css/bootstrap.css"/>
<link rel="stylesheet" href="build/css/main.css"/>
<!-- endbuild -->
</head>
<!-- build:js -->
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('build/js/main.js!jsx');
</script>
<!-- endbuild -->
Will produce:
<head>
<link rel="stylesheet" href="styles.min.css">
</head>
<body>
<script src="js/bundle.min.js"></script>
</body>
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>