jQuery AJAX with two domains

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

Answer 2

I think that the most appropiate method for loading a page is .load()

Second, as Nick said, you are experiencing cross domain issues. One option would be executing load() against a page on your site that acts as proxy for requesting the page you need.

For instance: You request .load(/myPage.aspx) and myPage.aspx request http://apps.natronacounty-wy.gov/css/feecalc/ui.htm and return it to the client