JavaScript file not loading in .jsp file

257
March 29, 2017, at 8:25 PM

Currently I'm programming in the front end and I have run into a problem where my javascript files dont load. My files are .jsp becauase of scala/scalatra backend. I have my index.jsp where I include my header file in the top and in the bottom I include my footer.

I include them like this:

<jsp:include page="header.jsp"/>
// CODE //
<jsp:include page="footer.jsp"/>

My header looks like this:

<!-- HEADER -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles/cssfile.css">
    <link rel="stylesheet" href="css/cssfile.css">
</head>
<body>

And my footer looks like this:

  <!-- FOOTER -->
      <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

My main.js looks like this:

$(document).ready(function () {
'use strict';
$(function() {
    $('a[href*=#]:not([href=#])').click(function () {
          if (
                  location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
                || location.hostname == this.hostname
            ) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if ( target.length ) {
                  $('html,body').animate({
                    scrollTop: target.offset().top
                  }, 1000);
                  return false;
            }
          }
    });
});

});

My file structure is like this:

css
  -cssfile1
  -cssfile2
js
  -jquery.js
  -main.js
header.jsp
index.jsp
footer.jsp

Mr src route shoulde be correct and when I insepect the source code of the site I can see the main.js file and click on it and it is the correct js. I have tried console.log("test"); and nothing appears, so it does not load. I added the jquery.js with the jquery javascript in it and added it first in the footer as you can see.

So what I want is that my main.js should load.

Thanks in advance :)

Answer 1

JSP EL provides a variable (${pageContext.request.contextPath}) that can be used at design-time to help resolve to the proper path at runtime. Try this might help, are you using the correct jquery libary?

<script type="text/javascript" src="${pageContext.request.contextPath}/js/main.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
READ ALSO
Why occur Internal server error in my ajax query?

Why occur Internal server error in my ajax query?

I want to pass some value to server and it has to return one string

210
Changing class type using Jquery

Changing class type using Jquery

I am using this code to fetch the data from startupphp

289
ASP.Net MVC 5 Html.BeginForm onsubmit and model with required attribute

ASP.Net MVC 5 Html.BeginForm onsubmit and model with required attribute

I have required attribute on my model properties but I added a "spinner" to show processing request in form onsubmitNow, even though that it didn't submit the form, it shows the "spinner" i created, and stuck on the overlay but the textbox with required...

468
Refreshing browser web-page not load in ui-router when locationProvider used

Refreshing browser web-page not load in ui-router when locationProvider used

When I directly refresh the browser using F5 or directly hitting the url, page not load but when I click on the button then the page gets load

213