CODEWITHSUNDEEP
jquery
hurtbox
hurtbox

Reputation: 386

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

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>

Upvotes: 0

Views: 845

Answers (1)

mastazi
mastazi

Reputation: 1672

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');

Upvotes: 1

Related Questions