What is jQuery noConflict?

What is jQuery noConflict?

jQuery No-Conflict Method

Hello, I think that if you have used more than one jquery methods on the same page then you might have encountered the jQuery nickname conflict problem, and you already know, jQuery uses the dollar sign ($) as a shortcut or alias for jQuery. Thus, if you use another JavaScript library that also uses the $ sign as a shortcut, along with the jQuery library on the same page, conflicts could occur. So that, jQuery provides a special method named noConflict() to deal with such situation.

 

The jQuery.noConflict() method return the control of the alias $ identifier back to other libraries. The jQuery code in the following example will put the jQuery into no-conflict mode immediately after it is loaded onto the page and assign a new variable name $lb to replace the $alias in order to avoid conflicts with the prototype framework

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Example</title>
<script src="js/prototype.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript">
// Defining the new alias for jQuery
var $lb = jQuery.noConflict();
$lb(document).ready(function(){
    // Display an alert message when the element with ID foo is clicked
    $lb("#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>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

 

Loading...

Second option to avoid alias

However, if you don't want to define another shortcut for jQuery, may be because you don't want to modify your existing jQuery code or you really like to use $ because it saves time and easy to use, then you can adopt another quick approach — simply pass the $ as an argument to your jQuery(document).ready() function, see this exmpale:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Example</title>
<script src="js/prototype.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript">
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>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

 

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.

 

Loading...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Example</title>
<script src="js/jquery.js"></script>
<script src="js/prototype.js"></script>
<script type="text/javascript">
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>

 

Learn Also:

How to send additional parameter with form data with ajax

Create dynamic bootstrap modal with JQuery and php

https://www.legendblogs.com/blog/jQuery-ajax-POST-example-with-PHP/121737

Loading...

 

Related posts

(2) Comments

  • User Pic

    Thank you, my problem solved.

  • User Pic

    helpful post....

Write a comment