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>
Related
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
I have index.html with all the source Javascripts and ui-view defined in it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>Projects</title>
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="resources/css/external/c3.min.css">
<link href="resources/css/external/colorpicker.css" rel="stylesheet">
<link href="resources/css/external/googlechart.css" rel="stylesheet">
<script type="text/javascript" src="scripts/dndTree.js"></script>
<!-- Controllers -->
<!-- Controllers for dashboard -->
<script type="text/javascript" src="app/shared/headercontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/project/projectcontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/conceptmodel/cmdboardcontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/repository/repositorycontroller.js"></script>
<script type="text/javascript" src="app/views/homepage/ontology/ontdboardcontroller.js"></script>
<script type="text/javascript" src="app/views/overview/section/component/componentmanager.js"></script>
<script type="text/javascript" src="app/views/overview/section/component/componenttemplate.js"></script>
<!-- document viewer js -->
<script type="text/javascript" src="app/views/analysis/docviewer/manager/docviewermanager.js"></script>
<script type="text/javascript" src="app/views/analysis/docviewer/model/solrdocument.js"></script>
<script type="text/javascript" src="app/views/analysis/docviewer/controller/docviewercontroller.js"></script>
</head>
<body id="db" class="homepage" ng-app="ipaApp">
<ui-view></ui-view>
</body>
</html>
I have around 150 such js files and currently all files are loaded when the webapp loads, resulting in increased loading time. I want to minify all these files and load files related to dashboard in index.html and others in the children templates for better user experience. I tried to move those script in templates but didn't work out. Is it possible to do so? What could be the best way to solve this?
A common approach is to move script tags to the end of the body tag, so this way, the content (html) is loaded and the scripts are loaded the last, so the user experience is better.
Despite the first time it could take some time to completely load all the resources, after that, you'll see the results, since you won't have to load any other resource again the user experience is so much better than if you load some scripts every time in a different template. That would be distribute the initial time in many portions (for every template). Not to mention that you might switch from one template to another more than once (and this way you load again the same resources). This is kind of a matter of perspective and what your final goal is: invest some time at the beginning and not after that, or just divide that time in minor portions, for every template you load.
With the first approach it would be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>Projects</title>
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="resources/css/external/c3.min.css">
<link href="resources/css/external/colorpicker.css" rel="stylesheet">
<link href="resources/css/external/googlechart.css" rel="stylesheet">
</head>
<body id="db" class="homepage" ng-app="ipaApp">
<ui-view></ui-view>
<script type="text/javascript" src="scripts/dndTree.js"></script>
<!-- Controllers -->
<!-- Controllers for dashboard -->
<script type="text/javascript" src="app/shared/headercontroller.js"></script>
<!-- ... -->
<!-- document viewer js -->
<script type="text/javascript" src="app/views/analysis/docviewer/manager/docviewermanager.js"></script>
<!-- ... -->
</body>
</html>
Hope this help :)
I am having trouble linking a javascript file to a dynamic website i made through php. My file structure is simply just:
index.php, css folder (which is working correctly), jscript folder (does
not work) and a pages folder (has all my pages)
My pages are simple just
header.php, registrationContent.php and footer.php
My index just includes all 3 php and it works perfectly fine. My problem is no matter what I do, whether inline, or soft coded javascripting it does not work. I am certain my syntax in the javascript is fine, its just the linking.
My header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Safe Drive Website</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/regStyle.css" rel="stylesheet" type="text/css" />
<script src="jscript/javascripts.js" type="text/javascript"></script>
</head>
<body>
<div class="topBar" id="topBar"><input type="Submit" value="Contact Us" class="topNavButton"/></div>
<div id="bannerText"><h1 class="mainHeader">SafeDrive</h1><h2 class="subHeader">Developer's Tool</h2></div>
I close the tags in the footer.php
Javascript files are included directly in your html page.
use the following line in your html page:
<html>
<head>
<script type="text/javascript" src="path/to/your/javascript/file.js"></script>
</head>
...
This is probably uncommon, but I thought of answering my own question because I found a solution, so that anyone else having the same problem could try mine.
Basically, it was loaded, the only problem was that the javascript functions weren't loaded and so to do that, i had to add:
window.onload = myJscriptFunction();
on any tag (body, footer etc. refer to w3schools for that information)
I do hope this helps anyone facing the same problem ^_^
I have a master page with the following lines inside my <head> tags.
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/navmenu.js" type="text/javascript"></script>
When I navigate to a page that uses URL routing, the lines above generate the following HTML.
<link href="../../Styles/Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/navmenu.js" type="text/javascript"></script>
Based on the mapped URL, the stylesheet link is correct. How can I get the script link to also be correct?
P.S. I tried setting runat="server" in the script link but that just seems to confuse ASP.NET. The entire project fails to compile based on bogus errors reported in my JavaScript file. (The javascript file runs fine otherwise.)
It looks like the best answer is this:
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<script src='<%= ResolveClientUrl("~/Scripts/navmenu.js") %>' type="text/javascript"></script>
Note that if I use the ResolveClientUrl() for the stylesheet <link> tag, it doesn't work. Apparently, there is special handing for this tag.
I created a default ASP.net MVC project. In the Master page I have the following at the top
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
I then need to add a javascript file and added the line as follows by dragging the file from the solution explorer to the page:
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
When I access a the site and look at the html from the browser I see this:
<head><title>
Index
</title><link href="Content/Site.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
The CSS file relative path was fixed but the JS file not. The site will be deployed to a different folder on the server than the root which I get on my development box.
Is there a proper way to do this?
Use the Url Helper:
<script type="text/javascript" src="<%=Url.Content("~/Content/script/MyFile.js")%>"></script>
Hope that helps
You can create a helper method that does something like this:
<%= Helper.IncludeJavascriptFile("Menu.js") %>
and then in that helper you do something like:
public string IncludeJavascriptFile(string fileName){
return Url.Content("<root>/Javascript/Files/" + fileName);
}
Then you can call that helper method from your view. If you decide to change the location of the files, it's only in one location you have to worry about it. If you change the name of the files, that's a different problem in and of itself.