Question

I want to load an HTML div from an html file hosted on windows azure blob (own by me) into a MVC view which is also hosted on windows azure web role ( Both the blob and the web role are owned by me ).

I tried using jquery.load() but it runs into cross domain issues and window azure blobs do not allow changing the CORS policy. Next i am trying to use Require.Js and Text.Js to achieve this cross domain load.
From the Text.Js documentation :

Text plugin determines that the request for the resource is on another domain, it will try to access a “.js” version of the resource by using a script tag. Script tag GET requests are allowed across domains. The .js version of the resource should just be a script with a define() call in it that returns a string for the module value.

My js code for cross domain call with require.js is :

require(["text!http://xxxxx.blob.core.windows.net/xxx/File"],
 function (html) {
   alert(html);
 }
);

Now the issue which i am facing is that the File’s .js version was successfully loaded by the plugin (Confirmed by using chrome inspector) but in the callback when i tried to access the text content of the file , it show me undefined. What i am doing wrong here, why the callback does not have the text content? Can anybody help me to solve this issue ? In case this is not solvable, i am open to other ways to achieve this cross domain load.

My understanding from require.js documentation is that cross domain calls can be accomplished by call a javascript version of the resource.

Answer 1

Try with define:

define(["text!http://xxxxx.blob.core.windows.net/xxx/File"], function (html) {
   return {
     template: html;
   }:
 }
);