Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How include an external JS file in a JSP page

Tags:

javascript

jsp

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();
}
like image 600
Kleber Mota Avatar asked Feb 28 '14 23:02

Kleber Mota


People also ask

How do I include an external JavaScript file?

To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.

Can we include JavaScript in JSP?

Yes, We can use javaScript with JSP page. As we know that javaScript is a Client-side script and JSP is a Server-side so we can attach a form validation to a JSP page to redirect HTML page and javaScript content. -Before submitting page to web server, it should be validate HTML field data.

Where should I put external JavaScript?

You can place an external script reference in <head> or <body> as you like. The script will behave as if it was located exactly where the <script> tag is located. External scripts cannot contain <script> tags.


1 Answers

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

like image 147
VHS Avatar answered Oct 12 '22 13:10

VHS