Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Putting jQuery into No-Conflict Mode without Using New Shortcut</title> <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> jQuery.noConflict(); jQuery(document).ready(function($){ // The dollar sign in here work as an alias to jQuery $("#foo").click(function(){ alert("jQuery is working well with prototype."); }); }); // Some prototype framework code document.observe("dom:loaded", function(){ // The dollar sign in the global scope refer to prototype $(bar).observe('click', function(event){ alert("Prototype is working well with jQuery."); }); }); </script> </head> <body> <p>Click these buttons to check whether the jQuery and Prototype JavaScript libraries are working without any conflict or not.</p> <button type="button" id="foo">Run jQuery Code</button> <button type="button" id="bar">Run Prototype Code</button> </body> </html>
