Using jQuery .load() - Not working

Question

$("#link1").click(function(){
$("#div1").load('../test.html');
return false;
});

This is an incredibly simple .load() function that simply does not seem to be working. Website has a 'js' folder where this code is being called in 'my-scripts.js' (within a doc ready function), test.html is located one directory up from the js folder (the main website folder) yet clicking the anchor with the 'link1' id does nothing.

EDIT: I've tried taking out the '../' too, and still nothing.

EDIT: This is a local website using WAMP - It's a Wordpress theme I'm making, too if that helps.

FINAL EDIT: Turns out since test.html wasn't in the root directory (outside of the wordpress theme folder) it wasn't finding it... strange since everyone suggested it should be in the same location as the calling html/php file. Thanks everyone.

Apologies in advance for possible lack of information as it's my first post.

What could be the cause? Is the mark up correct? Thanks.

The ../ will be relative to the current document, not the js file. — Pekka
– Pekka, Commented Feb 14, 2011 at 0:45
Thanks forgot to mention I've already tried that - See edit. — BlueSpore
– BlueSpore, Commented Feb 14, 2011 at 0:47
stupid question, but do you actually have an element with the id "#div1" in your document? Also, have you checked the path of the URL parameter? It should be relative to the document, not relative to the script file. — Brian Driscoll
– Brian Driscoll, Commented Feb 14, 2011 at 0:48
@Mushii Then use a tool like Firebug's "net" tab to see what the request returns. You are not on a file:// url with this, correct? — Pekka
– Pekka, Commented Feb 14, 2011 at 0:49
Following what Pekka said, always use some browser based resource monitor to inspect what your browser is requesting, so you can spot 404s and identify these sort of problems quickly. For instance, Firebug's Net panel. — Orbling
– Orbling, Commented Feb 14, 2011 at 0:49

user7675 · Accepted Answer · 2011-02-14 03:17:23Z

1

Weird question, since it seems to have been resolved completely in the comments.

FINAL EDIT: Turns out since test.html wasn't in the root directory (outside of the wordpress theme folder) it wasn't finding it... strange since everyone suggested it should be in the same location as the calling html/php file. Thanks everyone.

Assuming a document root (ie. the base WordPress directory) of:

/var/www

And a theme directory of:

/var/www/wp-content/themes/my-theme

And a theme template file of:

/var/www/wp-content/themes/my-theme/js/my-scripts.js

If you want to display /var/www/wp-content/themes/my-theme/test.html, you need to construct the .load() URL in relation to the page being displayed; the actual file on disk is irrelevant (i.e. don't construct the path relative to my-scripts.js). You would probably want to use the absolute path:

$('#div1').load('/wp-content/themes/my-theme/test.html');

answered Feb 14, 2011 at 3:17

user7675

Sign up to request clarification or add additional context in comments.

1 Comment

BlueSpore Over a year ago

Legend. That's exactly what I needed. Only it required './' at the beginning of the absolute path in order for it to work. Thanks a lot, Adam.

Collectives™ on Stack Overflow

Using jQuery .load() - Not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related