jQuery .load() doesn't work online, but works on my local drive

Question

This code runs fine on my computer at home (not online), but when I upload it entirely to my server (all the same code as on my home computer), the jQuery code doesn't want to work. When you hover over an image, the P element P1 is supposed to change text value to what the .txt file says. I couldn't attach the .txt file in the snippet so my example here doesn't reflect perfectly. I put in random text just to give an idea of what is supposed to happen. Normally, the P1 is blank, and when an IMG is hovered over, the text value changes to whatever the .txt states.

I feel it has to do with when I load the .txt file, it may be looking in the wrong directory

$(document).ready(function() {
  $('img').mouseover(function() {
    $('#p1').load('file.txt');
  });

  $('img').mouseout(function() {
    $('#p1').html('');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/200x100" hspace="15"></img>
<img src="http://placehold.it/200x100" hspace="15"></img>
<img src="http://placehold.it/200x100" hspace="15"></img>
<p id="p1">sdfsd</p>

is there any error in your browser console... do you have a link where we could see the problem — Arun P Johny, Jan 05 '16 at 08:06
The URL I have is here: http://amkhanportfol.comlu.com/jquery/ When hovering over the images, the P element doesn't display any text (not working over the server) — hurtbox, Jan 05 '16 at 08:09
look at your browser console... there is an error `Uncaught SyntaxError: Unexpected token }` — Arun P Johny, Jan 05 '16 at 08:12
In your script file, http://amkhanportfol.comlu.com/jquery/queries.js the mouseover/out handlers has an extra set or `});` in them... so `$('img').mouseover(function(){ $('#pget').load('jquery.txt'); }); $('img').mouseover(function(){ $('#pget').html(''); });` — Arun P Johny, Jan 05 '16 at 08:17
check if is browser security problem: http://stackoverflow.com/questions/19902538/loading-local-files-with-javascript-without-a-web-server — TotPeRo, Jan 05 '16 at 08:32

mastazi · Accepted Answer · 2016-01-05T08:55:16.063

1

EDIT It seems that your server is not serving files of type .txt (when I try to access the URL I get 404), so you need to change the file extension to something else, e.g. .html.

In addition to that, see below on how to use absolute path instead of relative path (this will ensure that your js code works in every page of your website, regardless of the path of the current page being visited).

If the text file is located in the root directory of the website, you should use

$('#p1').load('/file.txt');

instead of

$('#p1').load('file.txt');

(note the '/'). This way it will always work regardless of the current path.

EDIT obviously if the file is in a subdirectory, then it should be something like

$('#p1').load('/path/to/file.txt');

EDIT 2 based on the info you provided it should be

$('#p1').load('/jquery/file.txt');

edited Jan 05 '16 at 08:55

answered Jan 05 '16 at 08:09

mastazi

1,623
26
41

I tried inputting '/filename.txt' instead, and it doesn't fix it for me. Both the txt and the index.html file for the jQuery page are within the same folder, however – hurtbox Jan 05 '16 at 08:21
yes but then it means that, in relation to the root, the file is under /jquery/, so you should use '/jquery/file.txt' – mastazi Jan 05 '16 at 08:23
Hmmm...that one's a no-go. The code I used originally works wonderfully on my home computer without putting it on the server. It's when it uploads to the server (no changes to the code) where it doesn't work – hurtbox Jan 05 '16 at 08:34
yeah I saw you modified the code. The problem could be the following: if you try to reach the file itself by clicking on this link: http://amkhanportfol.comlu.com/jquery/jquery.txt you will see a 404 error (file not found). Perhaps your hosting provider is blocking files of type txt. Could you try and modify the extension in .html (both by renaming the file and modifying the js)? – mastazi Jan 05 '16 at 08:39
Bingo! You hit the nail right on the head! The server doesn't like txt files. It worked with the html file – hurtbox Jan 05 '16 at 08:45
I'm glad it worked! I will edit the answer to reflect that. – mastazi Jan 05 '16 at 08:50

jQuery .load() doesn't work online, but works on my local drive

1 Answers1