Including jQuery Before Other Libraries


The above solutions to avoid conflicts rely on jQuery is being loaded after prototype.js is loaded. However, if you include jQuery before other libraries, you may use full name jQuery in your jQuery code to avoid conflicts without calling the jQuery.noConflict(). But in this scenario the $ will have the meaning defined in the other library.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/jquery.js"></script>
<script src="js/prototype.js"></script>
<script>
jQuery(document).ready(function($){
    // Use full jQuery function name to reference jQuery
    jQuery("#foo").click(function(){
        alert("jQuery is working well with prototype.");
    });
});
 
// Some prototype framework code
document.observe("dom:loaded", function(){
    // The dollar sign here will have the meaning defined in prototype
    $("bar").observe("click", function(event){
        alert("Prototype is working well with jQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *