web-dev-qa-db-fra.com

Comment inclure un fichier JS externe dans une page JSP

J'ai une application de printemps MVC où dans ma page principale, j'ai besoin d'utiliser un fichier javascript. J'essaie d'inclure le fichier de cette façon:

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

mais lorsque j'exécute l'application, le comportement du système semble qu'aucun script n'est en cours d'exécution. T aussi essayer ceci:

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

mais le résultat était le même. Quelqu'un a une idée pourquoi cela se passe?

ps .: tout le code de ma page est:

<!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>

Le script doit ouvrir mes sous-pages dans une fenêtre contextuelle, mais elles s'ouvrent dans la fenêtre du navigateur.

** MISE À JOUR 1 **

Mon index.js est:

$(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();
}
javascriptjsp
11
Kleber Mota

mais lorsque j'exécute l'application, le comportement du système semble être non. le script est en cours d'exécution.

En effet, le navigateur ne parvient pas à charger le fichier "index.js" javascript à partir de l'emplacement spécifié. Si vous ouvrez la console du navigateur et accédez à l'onglet "Réseaux", vous verrez apparaître 404 (ressources non trouvées). De cette manière, vous ne pouvez pas spécifier une URL relative à un JavaScript dans un fichier JSP.

Vous devez fournir la structure de votre dossier (où index.js se trouve dans votre projet) et la manière dont vous avez configuré le fichier web.xml. Mais si vous essayez ce qui suit, cela fonctionnera sûrement:

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

Et gardez ensuite le dossier 'js' contenant 'index.js' au même niveau que 'WEB-INF'.

5
VHS

Vérifiez le chemin du fichier d’index, puis assurez-vous que le code est correct.

0
Marios Nikolaou