I am new to server programming.
I cannot get the bootstrap js files to link to my ejs file. I am trying to link the js files to index.ejs.
I have this code:
<script src="jquery.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
They are in the same original folder, so why doesn't this work?
Thanks for your help
Screenshot of the situation
Related
I have a plain HTML template which I am trying to convert into a small React app (using create-react-app). I have inserted the following script tags into the index.html file located in the public directory, but it doesnt seem to be running some of the scripts
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div>
<script src="%PUBLIC_URL%/js/jquery.js"></script>
<script src="%PUBLIC_URL%/js/popper.min.js"></script>
<script src="%PUBLIC_URL%/js/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/js/TweenMax.js"></script>
<script src="%PUBLIC_URL%/js/jquery-ui.js"></script>
<script src="%PUBLIC_URL%/js/jquery.fancybox.js"></script>
<script src="%PUBLIC_URL%/js/owl.js"></script>
<script src="%PUBLIC_URL%/js/mixitup.js"></script>
<script src="%PUBLIC_URL%/js/appear.js"></script>
<script src="%PUBLIC_URL%/js/wow.js"></script>
<script src="%PUBLIC_URL%/js/custom-script.js"></script>
</body>
</html>
if i load the page and go into the console and type $ === jQuery it returns true, which tells me that the jquery.js file is being loaded, but a lot of functionality from the other files does not seem to work.
There are no errors being generated in the console either
Am i doing something wrong in the way i am bringing these files into the project?
I'm working on a simple project where I included a simple js file to fetch out a data from api on click of a button. It was working when I had HTML file and js file in same folder and used by simply clicking on index.html . Now i am using expressjs for same and written all the HTML code in index.ejs file. For some reason, the js file has stopped working. I have tried changing the paths and carefully defining the path, also kept the file in same folder as of ejs file but it does not seem to work. Any suggestions would be helpful. The lines I have included in ejs file as are as follows. Here the js file is in the js folder of public folder of the project
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
I got this problem resolved by adding the following path to jQuery src
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
instead of
"jquery-3.2.1.min.js"
How can I change context root path from http://host:port/app_name to only an app_name in web.xml file or another way in Dynamic Web Project.
Actually, I'm facing an issue to import local javascript, css and other resources into my view say html/jsp.
for example, I have some js and css files inside resources folder of web-content.
Now to import these I'm using below code.
<link rel="stylesheet" href="http://localhost:8080/appname/resources/css/bootstrap.min.css">
<script type="text/javascript" src="http://localhost:8080/appname/resources/js/angular.min.js"></script>
<script type="text/javascript" src="http://localhost:8080/appname/resources/js/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost:8080/appname/resources/js/bootstrap.min.js"></script>
So now I want to change http://localhost:8080/appname/ to the only appname/ means <script type="text/javascript" src="appname/resources/js/angular.min.js"></script> as host and port dynamic in nature and can be changed anytime. So how can I achieve it.
I import my css file and javascript files in index.xhtml
<script type="text/javascript" src="resource/js/bag.js"></script>
My project works like this in http://localhost:8084/Proje1/ . But when i open http://localhost:8084/Proje1/faces/index.xhtml this url, doesn't work. It doesn't find css file and jquery files. How can i fix this. Thank you.
Place your resource folder under WebContent, and replace your <script> import with this:
<script src="#{request.contextPath}/resource/js/bag.js"></script>
My index.html page looks like this:
<html>
<script src="js/file1.js"></script>
<script src="js/file2.js"></script>
<script src="js/file2.js"></script>
</html>
Using grunt i was able to concat and minify the js files into one file at prod/js/file.min.js. I also have a new index.html page at prod/index.html that is minify.
The problem now is that this new index.html page still reference the old three javascript files and not the new single javascript file. How would I go about changing this in grunt?
final html file should be:
<html>
<script src="js/file.min.js"></script>
</html>
You can use grunt-processhtml plugin to replace it
https://www.npmjs.com/package/grunt-processhtml