15

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();
}
Kleber Mota
  • 8,521
  • 31
  • 94
  • 188

4 Answers4

9

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'.

VHS
  • 9,534
  • 3
  • 19
  • 43
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.

Marios Nikolaou
  • 1,326
  • 1
  • 13
  • 24
  • 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. – Kleber Mota Feb 28 '14 at 23:46
  • place the index file in the same folder with the jsp and edit to just to make sure that the path is not the problem. – Marios Nikolaou Feb 28 '14 at 23:51
  • 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: ** ** and include a javascript function directly in the code, the script is executed normally. – Kleber Mota Mar 03 '14 at 15:58
  • 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. – Marios Nikolaou Mar 03 '14 at 20:44
  • 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.: ****, the code works fine; but when I include an external file, don't work. – Kleber Mota Mar 04 '14 at 01:55
  • Put the jquery links as i said before ,maybe that is causing the problem.The code for jsp page is posted above? – Marios Nikolaou Mar 04 '14 at 07:03
  • yes, the code for the jsp is exactly as above, except that now all the 3 files were included in the project, then I refer to them by a local path ("****). – Kleber Mota Mar 04 '14 at 09:39
  • @KleberMota, was that fixed now ? I also have a question when we deploy this jsp code in remote server (with no internet connectiong) will this references like code.jquery.com/jquery-2.1.0.min.js kind will work ? – rinilnath Sep 15 '21 at 13:55
0

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>

JW JR
  • 1
  • 2
0

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

<script type="text/javascript"><%@include file="myJavascript.js" %></script>
Lof
  • 251
  • 1
  • 3
  • 7