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
});
精彩评论