Explore our sites

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am not a pure javascript coder and I want to leverage on JQuery. I am doing an analytic for a client who has many sub websites that belongs to his clients. He wants to do a reporting feature just like how Google analytic functions but more to his customized needs. The websites that he has created may be using different versions of JQuery or not even be using JQuery. Thus, I can't assume that all websites that he has implemented is using JQuery. So this is what I need to know and anyone can help me advise of what should be done:

  1. I want to create an external javascript to load Jquery (hosted in google) using pure javascript. How can i do this?
  2. Use the loaded Jquery framework only for my external javascript file so that the JQuery framework does not conflict with any other existing versions of Jquery that might be called by a website. How can i do this?
  3. With this external javascript created can be den be put in the head section of all my client websites so that I can track for analytics.

My client does not want to use google analytics and he has his reasons. Hope to hear how you will suggest implement your feature.

share|improve this question
 
in the title you mentioned that you would be using the loaded jQuery for ajax requests. If that is the only thing jQuery would be used for - you can use some other (smaller) library for that. Check out microjs.com/#ajax –  PsyBurn Aug 10 '13 at 11:23
add comment

2 Answers

up vote 1 down vote accepted

Since your analytic will be dependant on a specific jQuery version - you can't use the one from the site it's included on. You will want to load the wanted jQuery in your own script.

Multiple version of jQuery can be used with jQuery's $.noConflict.

Your script should look somewhat like the following:

var script = document.createElement('script');
script.type = 'text/javascript';
//the url of the needed jquery
script.src = '//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js';
script.onload = script.onreadystatechange = function() { 
  var rs = this.readyState; 
  if (rs) {
    if ((rs != 'complete') && (rs != 'loaded')) {
      return;
    }
  }
  //after loading the jQuery - relinquish jQuery's control of the $ variable.
  var myQuery = $.noConflict(true);
  // alias loaded jQuery to a $ within the functions scope 
  myQuery(document).ready(function($) {
    // code here normally with the loaded jQuery using the $ variable
  });
}
//append the script into the document head
document.getElementsByTagName('head')[0].appendChild(script);

For other uses of $.noConflict checkout jQuery docs.

share|improve this answer
 
Hi. Just to clarify may i know what , if(rs) {} does? –  madi Aug 21 '13 at 13:33
 
@madi - if (rs) {} checks if the script is loaded. The noConflict code executes after the script is fully loaded. –  PsyBurn Sep 9 '13 at 18:16
add comment
up vote -1 down vote 
window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"><\/script>')
share|improve this answer
 
This does not load the javascript to only my external javascript but to the body tag. This isn't the answer im looking for. –  madi Aug 9 '13 at 15:56
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.