Browser doesn't recognize inclusion of external javascript/jquery file

StackOverflow https://stackoverflow.com/questions/22152814

  •  19-10-2022
  •  | 
  •  

문제

In my Dynamic Web Project (Eclipse), developed with the Spring MVC framework, I have the JSP page below, placed in the folder WEB-INF/jsp/ :

<!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 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="#">Logout</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div id="results">
        <a href="#" id="close">Fechar</a>
        <div id="content"></div> 
  </div>  
</body>
</html>

My problem is that apparently the application don't be reading the js/index.js file, placed in folder WebContent/js (the css files, placed in WebContent/css, are read normally). When I put some javascript / jquery code directly in the JSP page (like the code displayed in the question Browser doesn't recognize javascript / jquery code), they are executed without any problems.

Someone can find the problem with this page?

Update 1

$(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();
}

FINAL UPDATE

In the end, I choose don't use jquery, and replace the code from the header by this:

<script>
  function handleClick(url){
      document.getElementById("results").style.display = 'block';
      document.getElementById("content").innerHTML='<object type="text/html" data="'+url+'" ></object>';
      }
  function cleanDiv() {
      document.getElementById("results").style.display = 'none';
      document.getElementById("content").innerHTML=' ';
  }
  </script>

each link has this format:

<a href="#" onclick="handleClick('listagem_evento.html')" class="icon evento">Eventos</a>

and the html code for my popup window get this form:

<section class="about" id="results" style="left: 183px; top: 111px;" onMouseDown="dragStart(event, 'results');">
    <div align="right"><a href="#" class="classname" onclick="cleanDiv()">X</a></div>
    <div id="content" align="center"></div>
  </section>

With the parte style="left: 183px; top: 111px;" onMouseDown="dragStart(event, 'results');" being responsible for move the popup across the screen (See the question how to drag and drop a <div> across the page)

올바른 솔루션이 없습니다

다른 팁

I'm not entirely sure, but I think i've seen this done before: remove http: and https: from your js sources. So it should look like this:

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

This might not work, it was just a thought I had.

It's not the best solution, but you can try load script dynamically with jQuery.load or something like

<script>document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

Try <script src="/js/index.js"></script> instead.

edit: This Absolute path & Relative Path explains the relative and absolute path in more detail.

I would suggest viewing the source code once your run your JSP in browser (right click - view page source or something similar, depending on your browser). You should see what URL for the JS the page is trying to load and should be able to correct it accordingly.

Also, perhaps it's just your context path missing from the URL. In that case, I'd use <c:url> tags when generating the URL.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top