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
– weigreen, Commented Jun 7, 2016 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
– ADreNaLiNe-DJ, Commented Jun 7, 2016 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
– jerik, Commented Jun 7, 2016 at 12:46

ADreNaLiNe-DJ · Accepted Answer · 2016-06-07 12:25:20Z

1

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>

answered Jun 7, 2016 at 12:25

ADreNaLiNe-DJ

4,8994 gold badges28 silver badges35 bronze badges

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

2 Comments

jerik Over a year ago

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 Over a year ago

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

Roberto Messa · Accepted Answer · 2021-08-16 15:24:01Z

1

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'

            });

        }
    });

answered Aug 16, 2021 at 15:24

Roberto Messa

8110 bronze badges

Comments

jerik · Accepted Answer · 2016-06-07 20:24:52Z

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>

Collectives™ on Stack Overflow

dynamically load css files through jQuery does not work

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related