CODEWITHSUNDEEP
javascriptjquerygoogle-ajax-libraries
Jake McGraw
Jake McGraw

Reputation: 56106

Injecting jQuery into a page fails when using Google AJAX Libraries API

I'd like to inject jQuery into a page using the Google AJAX Libraries API, I've come up with the following solution:

http://my-domain.com/inject-jquery.js:

;((function(){

  // Call this function once jQuery is available
  var func = function() {
    jQuery("body").prepend('<div>jQuery Rocks!</div>');
  };

  // Detect if page is already using jQuery
  if (!window.jQuery) {
    var done = false;
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement("script");
    script.src = "http://www.google.com/jsapi";
    script.onload = script.onreadystatechange = function(){

      // Once Google AJAX Libraries API is loaded ...
      if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {

        done = true;

        // ... load jQuery ...
        window.google.load("jquery", "1", {callback:function(){

          jQuery.noConflict();

          // ... jQuery available, fire function.
          func();
        }});

        // Prevent IE memory leaking
        script.onload = script.onreadystatechange = null;
        head.removeChild(script);
      }
    }

    // Load Google AJAX Libraries API
    head.appendChild(script);

  // Page already using jQuery, fire function
  } else {
    func();
  }
})());

The script would then be included in a page on a separate domain:

http://some-other-domain.com/page.html:

<html>
  <head>
    <title>This is my page</title>
  </head>
  <body>
    <h1>This is my page.</h1>
    <script src="http://my-domain.com/inject-jquery.js"></script>
  </body>
</html>

In Firefox 3 I get the following error:

Module: 'jquery' must be loaded before DOM onLoad! jsapi (line 16)

The error appears to be specific to the Google AJAX Libraries API, as I've seen others use a jQuery bookmarklet to inject jQuery into the current page. My question:

Upvotes: 4

Views: 9258

Answers (4)

Pollar
Pollar

Reputation: 51

You can use less painful solution to inject jquery (the lastest stable version available) to any page.

jQuerify - Chrome extension used to inject jQuery (the latest stable version available) into any web page (even HTTPS)"

Upvotes: 1

David K Roberts
David K Roberts

Reputation: 11

I Got It Working!!!!! I figured it out by looking in the application playground....

Here is the wrapper to start using jquery.... Put an alert in the function to see it work

google.load("jquery", "1.4.2");

function OnLoad(){
    $(function(){

    });
}

google.setOnLoadCallback(OnLoad);

Upvotes: 1

Jeremy Ricketts
Jeremy Ricketts

Reputation: 2601

I found this post after we figured out a different solution. So for some reason, if you can't use the accepted solution, this one seem to work fine:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        // jQuery hasn't been loaded... so let's write it into the head immediately.
        document.write('<script type="text/javascript" src="/jquery-1.3.2.min.js"><\/script>')
        }
</script>

One issue with the accepted solution is that you're forced to put all your code that you want to run on the page into your callback function. So anything that needs jQuery (like plugins) need to be called from that function. AND, all your other included JS files that require jQuery are dependent upon jQuery being loaded BEFORE all the other scripts fire.

Upvotes: 2

Jed Schmidt
Jed Schmidt

Reputation: 2955

If you're injecting, it's probably easier to request the script without using the google loader:

(function() {
    var script = document.createElement("script");
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
    script.onload = script.onreadystatechange = function(){ /* your callback here */ };
    document.body.appendChild( script );
})()

Upvotes: 14

Related Questions