jerik jerik - 5 months ago 37
CSS Question

dynamically load css files through jQuery does not work

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()?

Answer

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>