How do I add jquery library with javascript?

Question

How do I add jquery library with javascript?

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (1 votes)

8

I would like to know how to load the jQuery library with pure Javascript and run something simple with jQuery after its loading?

My code looks like this:

function colocaScript(){
    var scriptJquery   = document.createElement('script')
    scriptJquery.type  = 'text/javascript';
    scriptJquery.src   = "http://code.jquery.com/jquery-1.10.2.min.js";
    scriptJquery.async = true;
    headHTML = document.getElementsByTagName('head')[0];
    headHTML.insertBefore(scriptJquery,headHTML.firstChild);
}

colocaScript()
$(document).ready(function () {
        alert("Ola Mundo");
})

It returns this error:

Uncaught ReferenceError: $ is not defined

javascript jquery dom

asked by anonymous 19.02.2014 / 14:44

3 answers

Error rendering - class could not be found: android.support.v7.internal.app.WindowDecorActionBar Time-out expiring faster than expected - ASP.NET

score 2 · Answer 1

Pass a callback function as a parameter to the "colocScript" function and this callback should run in the "onload" of the script.

        function colocaScript(callback)
        {
            var scriptJquery = document.createElement('script')
            scriptJquery.type = 'text/javascript';
            scriptJquery.src = "http://code.jquery.com/jquery-1.10.2.min.js";
            scriptJquery.async = true;
            scriptJquery.onload = function()
            {
                callback();
            };
            headHTML = document.getElementsByTagName('head')[0];
            headHTML.insertBefore(scriptJquery, headHTML.firstChild);
        }

        colocaScript(function()
        {
            $(document).ready(function()
            {
                alert("Ola Mundo");
            })

        });

score 2 · Answer 2

Use this function

src = file url for example link

p>

callback usage

LoadScript("http://code.jquery.com/jquery-1.10.2.min.js",function(){ alert('Acabou de carregar')  })

Function

 LoadScript = function (src, callback) {
            var s,
                r,
                t;
            var callback = (typeof(callback)=='function')? callback : function(){};
            r = false;
            s = document.createElement('script');
            s.type = 'text/javascript';
            s.src = src;
            s.async = true;
            s.onload = s.onreadystatechange = function () {
                //alert(this.readyState);
                if (!r && (!this.readyState || this.readyState == 'complete' || this.readyState == 'loaded') ) {
                    r = true;                
                    console.log("js carregado: "+src);
                    callback.call(this);
                }
            };
            try {
                t = document.getElementsByTagName('script')[0];
                t.parent.insertBefore(s, t);
            } catch (e) {
                t = document.getElementsByTagName('head')[0];
                t.appendChild(s);           
            }
        }

score 1 · Answer 3

The problem is that your script loads asynchronously, and because of this jQuery is called directly after colocaScript() and that is before script has loaded.

Use this:

window.onload = function () {
    $(document).ready(function () {
        alert("Ola Mundo");
    })
}

Example

In this case I used window.onload , but you can use onload to also control when the script has loaded like Lucas referred .