Dynamically load jquery in plain javascript

Question

I am taking a page that does not have jquery referenced in the dom. I need to use some of the jquery functionality, so i figured the best bet is to inject jquery into the existing dom. I got the function idea from Load jQuery with Javascript and use jQuery and How to include jQuery dynamically in any website using pure javascript ....none of these solutions seem to work for me. I am still getting an error not recognizing the jquery selector.

(function() {
    function getScript(url, success) {
        var script = document.createElement('script');
        script.src = url;
        var head = document.getElementsByTagName('head')[0],
            done = false;
        // Attach handlers for all browsers
        script.onload = script.onreadystatechange = function() {
          if (!done && (!this.readyState
               || this.readyState == 'loaded'
               || this.readyState == 'complete')) {
            done = true;
            success();
            script.onload = script.onreadystatechange = null;
            head.removeChild(script);
          }
        };
        head.appendChild(script);
    }
    getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js',function() {
        // Yay jQuery is ready \o/
    });                         


    cards = $('div:first');
    $('body').empty().append(cards);

    // Delete first and second child divs

    first = $('div:first div:first');
    $('div:first div:first').css('position', '').css('left', '').css('z-index', '').css('height', '250px').remove();

    second = $('div:first div:first');
    $('div:first div:first').css('position', 'relative').css('left', '').css('z-index', '').remove();

    $('body').empty().append(first).append(second);
    })();

You're supposed to move your own code into the callback, to where it says // Yay.... Only then is your code run after jQuery was loaded. — user5734311
– user5734311, Commented Dec 5, 2016 at 21:07
wel;l thats embarrassing...feel free to answer and ill accept — Jacob Alley
– Jacob Alley, Commented Dec 5, 2016 at 21:10
There is no such property "onreadystatechange" on script element, I think it is misleading information, just "onload" is enough. Here answer from Chris G is acceptable. Here is the plunker for the same plnkr.co/edit/WYV7PQDX9wJTjnVfQENa?p=preview — Sachin G.
– Sachin G., Commented Dec 6, 2016 at 3:50

user5734311 · Accepted Answer · 2016-12-06 03:08:40Z

1

You're supposed to move your own code into the callback, to where it says // Yay.... Only then is your code run after jQuery was loaded.

getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js', function() {
    // Yay jQuery is ready \o/

    $('body').empty().append($('div:first'));
    // Delete first and second child divs
    for (var i = 0; i < 2; i++) {
        $('div:first div:first').remove();
    }
});

answered Dec 6, 2016 at 3:08

user5734311

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

Collectives™ on Stack Overflow

Dynamically load jquery in plain javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related