jQuery No-Conflict Mode

This section contains a whole bunch of examples demonstrating the various jQuery features
Site Admin
Posts: 159
Joined: Sun Jun 26, 2022 10:46 pm

jQuery No-Conflict Mode

Post by C0D3D »

Putting the jQuery into no-conflict mode

Example 1

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Putting jQuery into No-Conflict Mode 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>
// Defining the new alias for jQuery
var $j = jQuery.noConflict();
$j(document).ready(function(){
    // Display an alert message when the element with ID foo is clicked
    $j("#foo").click(function(){
        alert("jQuery is working well with prototype.");
    });
});
 
// Some prototype framework code
document.observe("dom:loaded", function(){
    // Display an alert message when the element with ID bar is clicked
    $(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>
Prevent conflict between jQuery and other JavaScript libraries

Example 2

Code: Select all

<!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>
Avoid conflict when including the jQuery before other JavaScript libraries

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Avoiding Conflicts when Including jQuery Before other Library</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/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>
	<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>
----------------------------------------------------------------------
Together we are one! One we are many... Much Love from one brother to another...
Working together to achieve amazing things!
Teamwork is key.
Knowledge is Power!

4 Basic datatypes.
Strings: Which store a series of characters.
Int: Which store a full integer or number.
Float: A numeric value with a decimal.
Boolean: Only stores True or False and are very useful with if statements

----------------------------------------------------------------------
ImgBB Image upload

Who is online

Users browsing this forum: No registered users and 0 guests