CODEWITHSUNDEEP
javascriptjqueryeventsloadclick
noloman
noloman

Reputation: 11985

jQuery .load(): loading a div when click

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!

Upvotes: 2

Views: 651

Answers (2)

Nick Craver
Nick Craver

Reputation: 630627

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

Upvotes: 3

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76910

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?

Upvotes: 0

Related Questions