dynamically load css files through jQuery does not work

Question

Normaly I load a javascript file in html:

<script src="v/0.2/strapdown.js"></script>

This file strapdown.js itself loads css files (line 69 - 83): Github > strapdown.js

  // Stylesheets
  var linkEl = document.createElement('link');
  linkEl.href = originBase + '/themes/'+theme+'.min.css';
  linkEl.rel = 'stylesheet';
  document.head.appendChild(linkEl);

  var linkEl = document.createElement('link');
  linkEl.href = originBase + '/strapdown.css';
  linkEl.rel = 'stylesheet';
  document.head.appendChild(linkEl);

  var linkEl = document.createElement('link');
  linkEl.href = originBase + '/themes/bootstrap-responsive.min.css';
  linkEl.rel = 'stylesheet';
  document.head.appendChild(linkEl);

Now I want to load this javascript file dynamically with jQuery.getScript():

$.getScript("v/0.2/strapdown.js").done( function(  ) { console.log( "loaded" ) } );

The javascript file is loaded, but it does not load the css files.

When I state the css file directly in the html file it works:

  <link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen" charset="utf-8">

But I want to have it dynamically, as it worked before.

Heres the code with the missing css files. Available on Github > test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Jerik's this and that</title>
  <meta name="description" content="Some stuff that I want to mention" />
  <!-- added stylesheet manually, normaly strapdown does this for me autoamatically. Does not work now -->
  <!-- link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen"
  charset="utf-8"-->
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
    function showmd( value ) { 
        $( "xmp" ).html( value );
        $.getScript("v/0.2/strapdown.js").done( function(  ) { console.log( "loaded" ) } );
    }
    $.get( "readme.md", function( data ) {
        showmd( data );
    }, 'text');
</script>
</body>
</html>

How do I get the css files dynamically loaded via the original script, that I load via jQuery.getScript()?

What is your actual problem? Your code have loaded css files. — weigreen, Jun 07 '16 at 12:21
I downloaded all files on github and opened locally. It gives errors about loaded local resources is not allowed. So, i modified the URLs for `readme.md` (points to github) and `strapdown.js` (points to the official strapdown website) and everything working correctly. — ADreNaLiNe-DJ, Jun 07 '16 at 12:23
Good hint. `strapdown.js` figures out the location of the css files based on the `href` attribute of the `link` tag. As this does not exists when loading it via jQuery, it cannot locate the css file. Its somehow solved by using the full URL to the `strapdown.js`. — jerik, Jun 07 '16 at 12:46

score 1 · Accepted Answer · answered Jun 07 '16 at 12:25

If you try to load local resources with Ajax, you will face problems with your browser security.

This is what I faced when I used your code without modifications.

Here is the code i used to make it work:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Jerik's this and that</title>
    <meta name="description" content="Some stuff that I want to mention" />
    <!-- added stylesheet manually, normaly strapdown does this for me autoamatically. Does not work now -->
    <!-- link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
    <link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
    <link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen"
    charset="utf-8"-->
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <xmp theme="cerulean" style="display:none;"></xmp>
    <script type="text/javascript" charset="utf-8">
        // http://stackoverflow.com/questions/11917734/jquery-ajax-call-success-how-do-i-change-a-global-variable-in-the-wrapper-javas
        // http://stackoverflow.com/questions/7598821/return-responsetext-from-jquery-get

        function showmd( value ) { 
            $( "xmp" ).html( value );
            $.getScript("http://strapdownjs.com/v/0.2/strapdown.js").done( function(  ) { console.log( "loaded" ) } );
        }

        $.ajax({
            url: "https://raw.githubusercontent.com/jerik/jerik.github.io/master/readme.md",
            method: "GET",
            success: function(data) {
                showmd(data);
            }
        });
    </script>
</body>
</html>

It was enough for me to use the full URL for the `strapdown.js` with `$.getScript("http://strapdownjs.com/v/0.2/strapdown.js")` — jerik, Jun 07 '16 at 12:48
does not seem to work on https, only on http. With https I get the error message `loading of mixed active content http://....strapdown.js was blocked`. [further information mixed content](https://developer.mozilla.org/en-US/docs/Security/Mixed_content) — jerik, Jun 07 '16 at 20:00

score 1 · Answer 2 · answered Aug 16 '21 at 15:24

You have to download the css, wait for it to finish download and them use it

$.ajax({
        url: 'includes/page/message/index.css',
        dataType: 'text',
        success: () => {

            $("head").append("<link>");

            let css = $("head").children(":last");

            css.attr({

                rel: "stylesheet",
                type: "text/css",
                href: 'includes/page/message/index.css'

            });

        }
    });

score 0 · Answer 3 · answered Jun 07 '16 at 20:24

Found a solution that works with http and https requests. I create an script tag with the required information and append it to the head tag. Firebugs reports a waring Synchrone XMLHttpRequests in the Main-Thread should not be used... but it works for me.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Jerik's this and that</title>
  <meta name="description" content="Some stuff that I want to mention" />
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
    function showmd( value ) { 
        $( "xmp" ).html( value );
        $( 'head' ).append( '<script src="v/0.2/strapdown.js"><\/script>' );
    }

    $.get( "readme.md", function( data ) {
        showmd( data );
    }, 'text');
</script>
</body>
</html>

dynamically load css files through jQuery does not work

3 Answers3