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

Question

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)

You have a relative file path for `js/index.js`... so it will be loaded relative to the location of the page containing the js include. If you use Fiddler2 or other tools to watch the traffic you would have got a 404 error for that file. — iCollect.it Ltd, Mar 03 '14 at 17:10
If you are using either Chrome or Firefox (or IE 9+) the dev tools within the browser have a network panel which would show the errors the browser is having loading the files. Chrome: https://developers.google.com/chrome-developer-tools/docs/network#network_resource_details Firefox: https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor IE: http://blogs.msdn.com/b/ie/archive/2010/04/22/ie9-developer-tools-network-tab.aspx — HJ05, Mar 03 '14 at 17:42
I use the network monitor of the Firefox to see any possible error during the load of the files, and I can verify all files were load correctly, the index.js included. By this way, I can't figure out why the code aren't working (added the content of the index.js in the question). — Kleber Mota, Mar 03 '14 at 19:04
Can you link a screenshot to network monitor results from Firefox? — eagerMoose, Mar 03 '14 at 20:00
This is probably the screenshot where you write the JS directly on your JSP page. Please put a screenshot where you include js/index.js, thanks. — eagerMoose, Mar 04 '14 at 20:44
ok, I solve the problema yet (see final update). thanks by your tips, but I think my problem was with the jquery (I have one file included without it and works fine). — Kleber Mota, Mar 04 '14 at 22:26

score 0 · Answer 1 · answered Mar 03 '14 at 17:10

0

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.

answered Mar 03 '14 at 17:10

theonlygusti

11,032
11
64
119

Just as a reference for you, the reason this is done is because it allows the file to fallback to the page's protocol. For example if the page is loaded `https://` then the js file will be loaded with `https://`. If the file were hard coded with the `http://` then the file would be fetched via the `http://` protocol even if the page was fetched via the `https://` protocol. [Here](http://stackoverflow.com/questions/14832705/why-is-there-no-protocol-specified-for-this-facebook-script-tag) is a neat little reference for you. – War10ck Mar 03 '14 at 17:14
I follow your sugestion about this two inclusions, and a code placed directly in the page continues working, and an external javascript continues not working. – Kleber Mota Mar 03 '14 at 17:26

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

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.

edited May 23 '17 at 10:26

Community

1
1

answered Mar 03 '14 at 17:10

eagerMoose

1,123
5
13
35

I try that, but still not work. I really think is very weird the css is being loaded and the javascript don't, since both are using the same notation. I don't understand too why placing the code directly in the jsp page works while include an external javascript don't work. – Kleber Mota Mar 03 '14 at 17:23
While this may answer the question, it would be better if you could add some explanation as to how and why it answers the question. – apaul Mar 03 '14 at 17:35

score 0 · Answer 3 · answered Mar 03 '14 at 17:30

0

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>

answered Mar 03 '14 at 17:30

user1809655

131
6

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

3 Answers3