I'm trying to load a js and a css file from within a javascript

Question

I'm trying to load a js and a css file from within a javascript in chrome I can see that both files are loaded, the mofo alert is triggered, and then the test alert, but not the test2 alert.

Why is that, is there an error in the javascript I can't see?

function loadScript(url, callback){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.onreadystatechange = callback;
    script.onload = callback;
    document.getElementsByTagName('script')[0].appendChild(script);
}

function loadCss(url, callback){
    var elem = document.createElement('link');
    elem.href = url;
    elem.type = 'text/css';
    elem.rel = 'stylesheet';
    elem.media = 'all';
    document.getElementsByTagName('script')[0].appendChild(elem);
}

var coptaJQStart = function() {
    var jQuery_1_11_3 = $.noConflict(true);
    alert('test');
};

var coptaCssStart = function() {
    alert('test2');
};


loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', coptaJQStart);
loadCss('http://www.tffan.com/copta.css', coptaCssStart);
alert('mofo');

It doesn't seem that you're executing the callback() function in loadCss(). — showdev
– showdev, Commented Sep 9, 2016 at 18:59
You have .onload set for you script element, but not setting one for your css (link) element — Patrick Evans
– Patrick Evans, Commented Sep 9, 2016 at 18:59
You're also appending the script and link to the first script tag, which won't work. Maybe you meant insertAfter? — Heretic Monkey
– Heretic Monkey, Commented Sep 9, 2016 at 19:03

Jayababu · Accepted Answer · 2016-09-09 19:08:27Z

1

You have to attach call back function in loadCss

 elem.onreadystatechange = callback;
    elem.onload = callback;

function loadScript(url, callback){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.onreadystatechange = callback;
    script.onload = callback;
    document.getElementsByTagName('script')[0].appendChild(script);
}

function loadCss(url, callback){
    var elem = document.createElement('link');
    elem.href = url;
    elem.type = 'text/css';
    elem.rel = 'stylesheet';
    elem.onreadystatechange = callback;
    elem.onload = callback;
    elem.media = 'all';
    document.getElementsByTagName('script')[0].appendChild(elem);
}

var coptaJQStart = function() {
    var jQuery_1_11_3 = $.noConflict(true);
    alert('test');
};

var coptaCssStart = function() {
    alert('test2');
};


loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', coptaJQStart);
loadCss('http://www.tffan.com/copta.css', coptaCssStart);
alert('mofo');

edited Sep 9, 2016 at 19:08

answered Sep 9, 2016 at 19:02

Jayababu

1,6211 gold badge14 silver badges31 bronze badges

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

5 Comments

Sterling Archer Over a year ago

What lines? Nobody likes to play find the line of code in the haystack. Explain your answers please.

Jayababu Over a year ago

the op has not called the callback function in 'loadCss' function thats why the callback is not happening..Please run my code you will get what OP expects.

showdev Over a year ago

As mentioned by @MikeMcCaughan, this is "appending the script and link to the first script tag, which won't work."

Daniel Bengtsson Over a year ago

no, the first script tag thing seems to work fine now all I needed was the onload bit for the callback.

showdev Over a year ago

Fair enough; your browser may be able to figure it out. But the structure is definitely not correct: <script><script></script><link></script>

Collectives™ on Stack Overflow

I'm trying to load a js and a css file from within a javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related