Fade out div and load page on click not working...jquery/ajax

Question

first stackoverflow question here...

What I'm trying to do is fade out content (#main) and load page on click and then fade in content (#main) of that page.

$('nav a').live('click', function(event) {
var link = $(this).attr('href');

$('#main').fadeOut('slow', function() {
    $.get(
        link +' #wrapper', 
        function(data) {
            $("#main").html(data).fadeIn('slow');
        }, 
        "html"
    );
});
return false;
});

But it's coming up with the following error in Chrome Console: Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

There's probably a more simple to do this, but can't seem to resolve this error.

I found a similar question to this on stackoverflow and would post it up but have lost it so apologies for that.

Any help would be appreciated!

Thanks George

Answer 1

This error is the link you are trying to get data off another domain.

In which case ensure that the calling webserver, i.e. The web server where the resource lives has a CORS header set. You also need to be aware that only modern browsers IE9+ support CORS.

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

If you get this to work I think you will want:

$("#main").fadeIn('slow');

One way round this issue would be to build a server side proxy which could request the resources you need and then your get method would talk to this proxy.