Injecting jQuery where Prototype exsists - noConflict() - prototypejs

Question

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();
// my thing here
});
This also throw an error:
jQuery.noConflict();
$(document).ready(function() {
// my thing here
});

Answer 1

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 );
});

Answer 2

Try
var $j = jQuery.noConflict();
$j(document).ready(function() {
  // my thing here
});
You can then use $j for any jquery $

Answer 3

$ 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
});

Answer 4

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
});