Dynamic Loading of JS and CSS using jquery

Question

Consider following code where I try load jquery-ui only when a popup is needed. This code will be invoked when user click on a link

 $.when( $.ajax({url: "http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css",  dataType: "html", cache: true}), 
    $.ajax({url: "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js", dataType: "script", cache: true}),
    $.ajax({url: "../../plugins/jquery.dialogextend.js", dataType: "html", cache: true}) )
    .then( 
    function() { ...code for dialog goes here

This code fails because jquery-ui.css will not load due to same origin policy. error message is " The Same Origin Policy disallows reading the remote resource at http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css. This can be fixed by moving the resource to the same domain or enabling CORS"

Now I am confused and trying to find out answer to the below two questions

In this code, jquery-ui.min.js is loaded but jquery-ui.css is not loaded. Due to same origin policy, if jquery-ui.css is not loaded, how jquery-ui.min.js is loaded?
When we include jquery-ui.css in the headed, as <link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" it will load. Why same origin policy is not applicable here

Please help me to understand this.

guest271314 · Accepted Answer · 2014-08-24 20:18:10Z

1

Edit, updated

See Same-origin policy

Here are some examples of resources which may be embedded cross-origin:

JavaScript with <script src="..."></script>. Error messages for syntax errors are only available for same-origin scripts.

CSS with <link rel="stylesheet" href="...">. Due to the relaxed syntax rules of CSS, cross-origin CSS requires a correct Content-Type header. Restrictions vary by browser: IE, Firefox, Chrome, Safari (scroll down to CVE-2010-0051) and Opera.

Note, dataType at $.ajax() request for "http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" appear to be html ?

Try

$.when( $("head").append("<link rel=stylesheet href=http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css />")
  , $.ajax({url: "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js", dataType: "script", cache: true})
  , $.ajax({url: "../../plugins/jquery.dialogextend.js", dataType: "html", cache: true}) )
    .then( 
    function() { ...code for dialog goes here

edited Aug 24, 2014 at 20:18

answered Aug 24, 2014 at 19:49

guest271314

1

Sign up to request clarification or add additional context in comments.

1 Comment

AVC Over a year ago

thanks, it works. but, how same origin policy works differently with this?

Collectives™ on Stack Overflow

Dynamic Loading of JS and CSS using jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related