How include an external JS file in a JSP page

Question

I have an spring mvc app where in my main page, I need use an javascript file. I try include the file this way:

<script type="text/javascript" src="js/index.js"></script>

but when I running the application, the system behavior seems like no script is running. T also try this:

<script type="text/javascript" src="<c:url value='js/index.js'/>"></script>

but the result was the same. Someone have any idea why this is happening?

ps.: the entire code of my page is:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>HorarioLivre</title>

  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script type="text/javascript" src="js/index.js"></script>

  <link rel="stylesheet" href="css/style-main.css">
  <link rel="stylesheet" href="css/style-popup.css">
</head>
<body>
  <header>
    <div class="container">
      <h1><a href="#">HorarioLivre</a></h1>
      <nav>
        <ul>
          <li><a href="listagem_evento.html" class="icon evento">Eventos</a></li>
          <li><a href="cadastra_horario.html" class="icon horario">Cadastrar Horarios</a></li>
          <li><a href="listagem_horario.html" class="icon horario">Listar Horarios</a></li>
          <li><a href="listagem_usuario.html" class="icon usuario">Usuarios</a></li>
          <li><a href="#">${usuario.nome}</a>
            <ul>
                <li><a href="usuario_perfil.html" class="icon perfil">Perfil</a></li>
                <li><a href="usuario_config.html" class="icon settings">Configura&ccedil;&otilde;es</a></li>
                <li><a href="usuario_logoff.html" class="icon logout">Sair</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div id="results">
        <a href="#" id="close">Fechar</a>
        <div id="content"></div> 
  </div>
</body>
</html>

The script should open my subpages in a pop-up windows, but they are being opened in the browser window.

** UPDATE 1 **

My index.js is:

$(document).ready(function(){
   setupPopup();
});

function setupPopup() {
   $('a').click(function() {
       $('#content').load($(this).attr('href'));
      $('#container').append('<div id="cover">');
      $('#results').fadeIn(500);
      popupPosition();
   });

   $('#close').click(function() {
      $('#results').fadeOut(100);
      $('#cover').remove();
   });

   $(window).bind('resize', popupPosition);
}

function popupPosition() {
   if(!$("#results").is(':visible')){ return; }

   $("#results").css({
      left: ($(window).width() - $('#results').width()) / 2,
      top: ($(window).width() - $('#results').width()) / 7,
      position:'absolute'
   });

   $('#results').draggable();
}

have you figured it out?

Subin Chalil
– Subin Chalil

2015-12-07 07:09:06 +00:00
Commented Dec 7, 2015 at 7:09 — Subin Chalil
– Subin Chalil, Commented Dec 7, 2015 at 7:09

VHS · Accepted Answer · 2017-02-06 20:37:36Z

12

but when I running the application, the system behavior seems like no script is running.

This is because the browser is unable to load the javascript 'index.js' from the specified location. If you open the browser console and go to the 'networks' tab, you will see 404 (resource not found) against it. You cannot specify a relative URL to a JavaScript in a JSP file that way.

You need to provide your folder structure (where index.js is located in your project) and how you have configured web.xml. But if you try the following, it will surely work:

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

And then keep the 'js' folder containing 'index.js' at the same level as 'WEB-INF'.

answered Feb 6, 2017 at 20:37

VHS

10.2k3 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JW JR · Accepted Answer · 2021-08-17 00:20:45Z

1

In hopes of saving others the half hour it cost me to resolve this, VHS's answer needs an update for anyone who has upgraded to Jakarta. The reference needs to be: <script type="text/javascript" src="${jakarta.servlet.jsp.PageContext}/js/index.js"></script>

edited Aug 17, 2021 at 0:20

answered Aug 16, 2021 at 1:53

JW JR

113 bronze badges

1 Comment

HardcoreGamer Over a year ago

Your code does not show up. Please edit your answer and validate in preview.

Lof · Accepted Answer · 2023-01-28 09:25:35Z

1

If "myJavascript.js" is located in same dir as jsp page:

<script type="text/javascript"><%@include file="myJavascript.js" %></script>

answered Jan 28, 2023 at 9:25

Lof

2811 gold badge5 silver badges7 bronze badges

Comments

Marios Nikolaou · Accepted Answer · 2014-02-28 23:36:56Z

0

Check the path of the index file and then make sure that the code is correct.I assume that js is a folder.Post the index.js code.

answered Feb 28, 2014 at 23:36

Marios Nikolaou

1,3361 gold badge15 silver badges27 bronze badges

8 Comments

Kleber Mota Over a year ago

the file index.js is in a folder calles js, placed inside the folder WebContent. Inside this same folder, there is my folder WEB-INF, where it is located my jsp page, referred in my project by DispatcherServlet from Spring MVC, the same way all the other pages from my app (including the pages linked from this page). ANyway, I will add the code from my javascript code.

Marios Nikolaou Over a year ago

place the index file in the same folder with the jsp and edit to <script type="text/javascript" src="index.js"></script> just to make sure that the path is not the problem.

Kleber Mota Over a year ago

ok, i try put the indes.js both in same folder with the jsp and in folder js/ inside my WebContent/ (I am developing a dynamic web project from eclipse), but none of them are working. The weird part is whem I remove the lines: <script src="code.jquery.com/jquery-2.1.0.min.js"></script> <script src="ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/…> <script type="text/javascript" src="js/index.js"></script> and include a javascript function directly in the code, the script is executed normally.

Marios Nikolaou Over a year ago

put at the top of the head tag the removed lines starting with the 210.min.js then ajax.... and then the index.js. I was developing a website using jquery functions and because i had placed the jquery link at the bottom of the head tag nothing was working :D.Just try it and tell me.By the way i am not familiar with jqeury so i don't know if the index.js code is correct.

Kleber Mota Over a year ago

But that is the problem: in this moment, i have exactly the code from update 4, and don't work. What I say is that WHEN I remove this lines and put some javascript code DIRECTLY in the jsp page (ex.: <script>function handleClick(url){alert(url);}</script>, the code works fine; but when I include an external file, don't work.

|

Collectives™ on Stack Overflow

How include an external JS file in a JSP page

4 Answers 4

Comments

1 Comment

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related