tags:

views:

82

answers:

3

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?

+4  A: 

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

Nick
Is there a reason it is not throwing an error though? I assume (and I am reading your link) that the origin is of the page and not the script?
Andrew Burns
Is this right: the domain www.natronacounty-wy.gov gets the script you pasted injected into it, then that script calls http://apps.natronacount-wy... from the www.natronacounty-wv.gov page?
Nick
Correct. The CMS is the www system, in the CMS I paste <script> tags to load JS off of my apps server (which works) I just can not (apparently) use JS to load anything else off of that apps server. My main goal is to have my advanced UI (for this little project) reside in a HTML file on my apps server which will get loaded with AJAX.
Andrew Burns
Ok, then it is definitely a cross-domain issue (violates SOP), even if the script is being loaded from the domain which you wish to fetch data from. I can modify my answer to include links to some jsonp articles, but I would probably rethink loading a whole UI from a different domain unless there is a very good reason to do so.
Nick
My main reason was because I can manage the apps domain but not the www domain (CMS system). I will re-do the way I am doing this. Thank you for all of your help nick.
Andrew Burns
+1  A: 

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

Claudio Redi
I can't do that as www isn't my server it is the vendor CMS system. apps IS my server which all my JS is stored on.
Andrew Burns
@Andrew I think you are misunderstanding, you would write the proxy on your server that has the javascript calls. This way you write your javascript to hit a local page/servlet that loads the remote content
Flash84x
@Flash84x I can't write any custom code on the server that would be able to proxy the calls. The only server I have access to is apps and if I could read a HTTP result from that I wouldn't need a proxy.
Andrew Burns
@Andrew you still aren't understanding it...You write the proxy on "apps". As an exmaple... in the Java world you would write a servlet that goes out and requests the contents from the CMS server which in turn makes it locally available to your javascript calls. So lets say you wrote a servlet on apps and it's mapped to the URI apps.natronacounty-wy.gov/myproxy, your jquery would then reference that url locally in the url parameter $.ajax({ url: '/myproxy', ...})the servlet returns the content to you locally being that it is simply making a copy of the remote content
Flash84x
@Flash84x No I understand perfectly. You are not understanding the issue. If I could retrieve content from apps server in the first place (the whole entire problem) then I wouldn't need the proxy. I can not get an ajax call to return anything from apps (JSONP would probably work, but at that point it is way over architected)
Andrew Burns
@Andrew you cannot get the content via Ajax, yes, I understand that. You can however access the content directly, great. The proxy would access the content directly and make it available locally, therefore the Ajax call would work because it is not violating the cross domain security policy that browsers have in place. I solved this exact issue myself 5 minutes before you posted the question using a servlet I wrote to act as a proxy. I needed to load in content from server B onto server A using an Ajax call, and ran into the exact issue you saw.
Flash84x
A: 

You could although query your request through YQL (Yahoo! Query Language), which will result in a JSONP file (it even supports XMLP -> XML with a callback function). This might decrease your performance, but Yahoo provides fast servers.

FB55
I tried the jQuery plugin that uses YQL and it did the same thing :( http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
Andrew Burns
It's really simpel to roll your own, just write the callback function and query "SELECT * from html where url='+url+'", while selecting XML as the output and your callback function as the callback. Inside of the callback function, you can select what you want to display and add it to the DOM.
FB55