jQuery .load(): loading a div when click

Question

I would like to achieve that when clicking in an image, in the div where this image is, a div with other content from another .html is loaded, but I can't get it done.

If I do, the following, it works perfectly:

$('#windows_link').click(function(){
        $('#apps_container').html("Hi!");
    });

But if I do the following, it does not work; it doesn't do anything actually:

$('#windows_link').click(function(){
        $('#apps_container').load('windows_apps.html #apps_container');
    });

Any help, please?

Thanks a lot in advance!

Have you used a tool like Firebug to determine if your 'windows_apps.html #apps_container' is actually returning anything? — Gregg
– Gregg, Commented Jul 1, 2011 at 14:22
@noloman - that's a cross-domain request in chrome, and won't work...that's where you're getting blocked. If you try it on an actual site (or local webserver) you should be good. — Nick Craver
– Nick Craver, Commented Jul 1, 2011 at 14:26
@Acorn - he's trying it locally, any other path is another domain when you're local, in some browsers...and in chrome this is true. — Nick Craver
– Nick Craver, Commented Jul 1, 2011 at 14:27

Nick Craver · Accepted Answer · 2011-07-01 14:34:21Z

3

When you're local any other HTML path is treated as another domain in certain browsers (Chrome is on the list). That means any AJAX request (what .load() does underneath) you attempt will be blocked by the same origin policy.

What you have will likely work fine...just not locally, in Chrome.

You can verify this by testing in another browser like Firefox, or by launching chrome with a command line switch to disable this safety feature (only for testing!, turn it off after):

chrome.exe --disable-web-security

answered Jul 1, 2011 at 14:34

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

3 Comments

noloman Over a year ago

Wonderful, so I will just try in another browser and trust that it'll work when uploaded to a web server. Thanks everybody for your help!

Orbling Over a year ago

@noloman: Really, unless you have a good reason not too, it is better to test develop on a server that has the same environment as the site will eventually be hosted on. Preferably that server. Otherwise there may well be unforeseen differences, like this.

Nick Craver Over a year ago

@noloman - I'm with orbling here, setup a localhost web server (lots of free options there) to do your testing and you'll be much happier (and less pushing to another site to test the small stuff).

Nicola Peluchetti · Accepted Answer · 2011-07-01 14:29:37Z

0

If the first try works correctly, i assume the problem is here

.load('windows_apps.html #apps_container');

When you click the link, do you see a call in your .net panel of firebug or of your debugging console(does the ajax call complete succesfully)?

Is windows_apps.html in the same folder of the page script that calls it?

is there a div called apps_container into that page?

edited Jul 1, 2011 at 14:29

answered Jul 1, 2011 at 14:24

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

Collectives™ on Stack Overflow

jQuery .load(): loading a div when click

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related