Injecting jQuery where Prototype exsists - noConflict()

I'm using webkit only. I need to inject jQuery into a page that already has prototype loaded. I'm using this code to load jQuery. (you can try in console)

var s = document.createElement('script');
s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js');
s.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);

I get an error with just the code above.

How can I use noConflict() on load. If I put the following code after injecting the jquery script, I still get an error.

$(document).ready(function() {
  jQuery.noConflict();
  开发者_如何学JAVA// my thing here
});

This also throw an error:

jQuery.noConflict();
$(document).ready(function() {
  // my thing here
});

EDIT: Because you're loading the script from another script, you should put the jQuery code you need to run in a callback to a load event for your script:

var s = document.createElement('script');
s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js');
s.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);

   // Place your code in an onload handler for the jQuery you're loading
s.onload = function() {

    jQuery.noConflict(); // release jQuery's hold on "$"

    jQuery(document).ready(function( $ ) {

      alert( $.fn.jquery );
   });
};

Another solution would be to not use this method of loading jQuery. Just hardcode your <script> element, and the code will run in the expected synchronous manner:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
    jQuery.noConflict(); // release jQuery's hold on "$"

      // do this with ready() -------v------ and the "$" will be available inside
    jQuery(document).ready(function( $ ) {

      // $ is safe for jQuery inside this .ready() callback
      alert( $.fn.jquery );
    });
</script>

Original answer:

Do this:

var s = document.createElement('script');
s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js');
s.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);


jQuery.noConflict(); // release jQuery's hold on "$"

  // do this with ready() -------v------ and the "$" will be available inside
jQuery(document).ready(function( $ ) {

  // $ is safe for jQuery inside this .ready() callback
  alert( $.fn.jquery );
});

Try

var $j = jQuery.noConflict();
$j(document).ready(function() {
  // my thing here
});

You can then use $j for any jquery $

$ is the alias/shortcut for jQuery (as well as prototype). NoConflict basically releases control of the $ shortcut, so that once called, the other library has control of it. Try this:

jQuery(document).ready(function() {
  // my thing here
});

Here, you use $ first and then use jQuery.noConflict(), the problem is that you've (wrongly) assumed $ is jQuery before you've set up the no conflict:

$(document).ready(function() {
  jQuery.noConflict();
  // my thing here
});

Here, you've done the opposite. You've done the no conflict bit first, good, but then continued to use $ to access jQuery, which will no longer work (as a direct result of the noConflict() call):

jQuery.noConflict();
$(document).ready(function() {
  // my thing here
});

Combining your two efforts you end up with the following. I've also added a $ to the .ready line so that inside the ready function you can still use $ as your jQuery reference.

jQuery.noConflict(); // stops $ being associated with jQuery
jQuery(document).ready(function($) { // use long-hand jQuery object reference to call `ready()`
  // my thing here
});