Question

OK here is the situation: I have an externally hosted CMS which works great for 99% of our needs. However on the more advanced things I inject my own CSS+JS and do magic. The problem I am running into is loading a simple HTML page from jQuery.ajax() calls. It appears to work in the sense that no warnings or errors are thrown; however in my success handler (which IS ran), the response is blank!

I have been scratching my head for the whole morning trying to figure this out and the only thing I can think of is that is has something to do with the cross domain issue (even though it appears to work).

Injected JavaScript:

$(document).ready(function() {
    doui();
});
function doui() {
    $.ajax({
        url: 'http://apps.mydomain.com/css/feecalc/ui.htm',
        cache: false,
        success: ajax_createUI,
        charset: "utf-8",
        error: function(e) {
            alert(e);
        }
    });
}
function ajax_createUI(data, textStatus) {
    alert(data);
    $("#ajax-content").html(data);
}

My ajax_createUI() success handler is called and textStatus is “success”; however data is empty.

This JS file resides @ http://apps.mydomain.com/css/js/feecalc.js however the CMS website (which gets the JS injected into it) resides @ http://www.mydomain.com/

Am I just being stupid or is it a bug that it looks like it should be working but isn’t?

Answer 1

This is not a bug, it is a feature of modern browsers: Same Origin Policy There are three ways to get around this. Looking at the way you’ve already attacked the problem, I would look into jsonp