HTML script src - Jquery library won't load from file

Question

I'm trying to run the Socket.io example program offline. The index.html page calls the Jquery library like so:

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

However, this obviously won't load without an internet connection. I have tried using a file in the same folder as the rest of the project:

 <script src="jquery-1.11.1.js"></script>

But I get a 404 error in the developer menu when running that as well. I'm not sure if I'm putting the file in the wrong spot, or if I'm using the script tag incorrectly, Any help is appreciated.

EDIT: Here is the full index.html file:

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="jquery.js"></script>
    <script>
      var socket = io();
      $('form').submit(function(){
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
      });
      socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
      });
    </script>
  </body>
</html>

Picture of Error Message

Picture of index.js

Will show you were it is trying to get it from..what is different than where it should be looking? — charlietfl, Jun 01 '16 at 23:27
Please provide a screenshot of the directory structure of your project. Also include which folder the jquery.js file is located in. This will allow us to tell you the exact path to use in your — Matthew, Jun 02 '16 at 16:14

chungtinhlakho · Answer 1 · 2016-06-02T04:22:03.573

0

Ok, I recommend changing your index.js to server.js, it makes more sense that is more like a server file for your app. It will serve a lot more things not just the index page. However, you can name it whatever you want. :)

Your problem is that node does not know your file system. You send the index back with __dirname +/index.html. __dirname tells node the current directory but on your index file, script src on your index.html file does not know where to start.

On your index.js file, tell node where to get all the static files, between line 3 and 5 app this.

app.use('/s', express.static(__dirname + '/static'));

the '/s' is the alias for this static directory that we're going to define. __dirname is your root dirctory and '/static' is the folder where i want all my static files to be since i don't want to expose my whole root.

For that exact line to work, you will need to add a folder name "static" on the directory where your index.js and index.html is right now.

on your index.html file, instead of

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

change the src to "/s/jquery.js" since node.js now knows what alias s represents.

<script type="text/javascript" language="/s/javascript" src="jquery.js">

good luck

edited Jun 02 '16 at 04:22

answered Jun 01 '16 at 23:12

chungtinhlakho

870
10
21

meaning you don't have your jquery file in the right location. make sure the file name is correct. can you paste the url that you are looking at and the url of the 404 errors and your file name of your jquery library – chungtinhlakho Jun 02 '16 at 00:06
I just added a screenshot with the errors and a picture of the files – Paul Harrington Jun 02 '16 at 00:16
we're getting closer. :) you have a node js file (i believe you named it index.js) that map the index file right? if so, are you using express in node? – chungtinhlakho Jun 02 '16 at 00:28
Yes I am using express – Paul Harrington Jun 02 '16 at 00:35
ok, your problem you're using a node server. When you send back the index file, node doesn't know what's it's map to and it can't see the directory where the index file is. try app.use('/') - this will map your whole server which is not recommended. create a directory where you want to host your static file and do app.use(express.static(path.to.directory)); – chungtinhlakho Jun 02 '16 at 00:37
try app.use('/') first and if it works, you know what your problem is, then you can restructure. :) – chungtinhlakho Jun 02 '16 at 00:37
no, in you server.js file. but i think you called it index.js file, this is where you tell node to server the index. right now to start, do you do node index.js in terminal to start??? – chungtinhlakho Jun 02 '16 at 00:47
Yes to start the server I do node index.js. – Paul Harrington Jun 02 '16 at 00:51
I added a picture of the index.js file – Paul Harrington Jun 02 '16 at 00:58
before line 5 in your index.js. do app.use("/") – chungtinhlakho Jun 02 '16 at 01:20

score 0 · Answer 2 · answered Jun 01 '16 at 23:12

0

If your Html and JS file are both in the same folder it should work definitely. Otherwise you need to put an address relative to your current file. Say your JS file is in the parent folder of your HTML file then :

<script src="../jquery-1.11.1.js"></script>

answered Jun 01 '16 at 23:12

akardon

43,164
4
34
42

That didn't work either, is the file incorrectly placed? – Paul Harrington Jun 02 '16 at 00:02
Ok ,so could you please copy/paste the exact URL or the both HTML and JS files on your local machine? – akardon Jun 02 '16 at 00:04
I just added a new screenshot – Paul Harrington Jun 02 '16 at 00:16
OK,as you see your jquery JS file's name is jquery.js so you need to use this address : – akardon Jun 02 '16 at 00:23
And for the socketio client JS you need to use this address (according to your folder structure) : – akardon Jun 02 '16 at 00:35
That part hasn't thrown any errors though? I'll try just in case – Paul Harrington Jun 02 '16 at 00:39
Wierd! you're probably missing something. If the Jquery.js contains the actual jquery library's code and your html file is the index.html then should work definitely. – akardon Jun 02 '16 at 00:53

score 0 · Answer 3 · edited May 23 '17 at 12:13

0

Maybe this question can help you with local local resources references How to properly reference local resources in HTML?

edited May 23 '17 at 12:13

Community

1
1

answered Jun 01 '16 at 23:14

Fábio Luiz

438
2
11

Angel Politis · Answer 4 · 2016-06-02T00:34:59.580

0

If your file is in the same directory as your html the following should make it work :

<script src="jquery-1.10.2.js"></script>

If it's in a folder that is in the same directory as your HTML use:

<script src="FOLDERNAME/jquery-1.10.2.js"></script>

If it's a level above your HTML file use:

<script src="../jquery-1.10.2.js"></script>

If none of these work be sure to double check your file's name in case there's a space in beginning or the end of the file's name.

[EDIT]

Well, if there's no spelling error and the change of placement doesn't fix it, then probably one or both of the files are corrupted. By the way, your jQuery version is outdated. Download v2.1.1 or use this script tag:

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Jun 02 '16 at 00:34

answered Jun 01 '16 at 23:18

Angel Politis

10,955
14
48
66

The file is definitely in the same directory as the index.html file where it is referenced. However this still produces errors. – Paul Harrington Jun 01 '16 at 23:23
Be sure then to double-check for any spelling errors. You may as well just copy the filename straight from the file itself and paste it in your editor. If that doesn't work either, please edit your question with more info as to where you have placed your script tag, because that may be the problem. – Angel Politis Jun 01 '16 at 23:27
Okay I added the html file and a picture of where the jquery file is placed – Paul Harrington Jun 01 '16 at 23:53
I tried that and it didn't change the 404 error on the JQuery file – Paul Harrington Jun 02 '16 at 00:18
Same error message unfortunately, is there an issue with the placement of the file? – Paul Harrington Jun 02 '16 at 00:27
Yes, your placement is incorrect. You should first include jQuery and then any other plugins that require it to work. – Angel Politis Jun 02 '16 at 00:34
Did you download the new jQuery file and still nothing? – Angel Politis Jun 02 '16 at 00:43
Yes I tried with multiple versions of the jquery file from their website, the same version the example was originally using, however I would like to make it available offline. – Paul Harrington Jun 02 '16 at 00:49
Have you tried removing and re-adding that slash in front of the src="/socket.io/socket.io.js" ? – Angel Politis Jun 02 '16 at 00:59

score 0 · Answer 5 · answered Jun 01 '16 at 23:19

0

Don't forget you can access the jquery file by typing in the exact (local) URL into your browser. Test by loading the URL http://localhost:[port#]/jquery-1.11.1.js Alter this URL with the correct directory path for your dev environment until your jquery successfully loads.

answered Jun 01 '16 at 23:19

Matthew

123
1
9

Could you elaborate a little more? I'm unaware of what you're describing – Paul Harrington Jun 02 '16 at 00:01
What he says is that you can use the absolute url of your file (link of the file inside server) instead of the relative url you are currently using (jquery.js). – Angel Politis Jun 02 '16 at 00:56

score 0 · Answer 6 · answered Jun 02 '16 at 00:34

Paul try followings:

Verify jquery file name and path if socket.io.js using jQuery change the order like

<script src="jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>

call javascript code after page load i.e. $(function(){}) as below:

$(function(){
var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });
  socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
  });
})

Thanks

score 0 · Answer 7 · edited May 23 '17 at 12:08

0

I had the same problem and I was looking for the solution around. I found your question but I didn`t find the answer so I posted my own question here. Someone actually knew how to make it work. So if you still want to know just check the answer I got: Raspberry Pi - Flask Server using JQuery not working Offline (Online it works)

edited May 23 '17 at 12:08

Community

1
1

answered Dec 12 '16 at 21:28

Iverton Lima

13
3

1

This is not an answer. – Fueled By Coffee Dec 12 '16 at 21:48

HTML script src - Jquery library won't load from file

7 Answers7