jQuery noConflict()

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery’s case, $ is just an alias for jQuery, so all functionality is available without using $.

$.noConflict() method can be used to relinquish jQuery’s control of the $ variable.
 

Using noConflict() with $ symbol

 
$ sybmol works as a shortcut for jQuery.

The $.noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it.

As shown in below example, we can still continue to use the name “jQuery”

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function() {
  jQuery("#message1").text("jQuery still working");
  try {
    $("#message2").text("$ still working");
  } catch (err) {
    jQuery("#message2").text("$ no longer working");
  }
});
</script>
</head>
<body>
<p id="message1"></p>

<p id="message2"></p>
</body>
</html>

 

 

Creating our own shortcut for jQuery

 
Similar to $ symbol, we can create our own shortcut.

Lets create our own shortcut jqr as shown in below example :
 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
jqr = $.noConflict();
jqr("#message1").text("jqr shortcut working");

</script>
</head>
<body>
<p id="message1"></p>
</body>
</html>

 

 

Using $ even after calling noConflict()

 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($) {
  // $ will here
  $("#message1").text("$ still working inside function");
});
try {
  // $ for jQuery will not here
  $("#message2").text("$ still working");
} catch (err) {
  jQuery("#message2").text("$ not working outside");
}

</script>
</head>
<body>
<p id="message1"></p>

<p id="message2"></p>

</body>
</html>

 

 

noConflict between two versions of jQuery loaded

 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var log = $("#message");

log.append("2nd loaded jQuery version ($): " + $.fn.jquery + "<br>");

jqr = jQuery.noConflict(true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

log.append("<h3>After $.noConflict(true)</h3>");

log.append("1st loaded jQuery version ($): " + $.fn.jquery + "<br>");

log.append("2nd loaded jQuery version (jqr): " + jqr.fn.jquery + "<br>");
</script>
</head>
<body>
<div id="message">

  <h3>Before $.noConflict(true)</h3>

</div>
</body>
</html>

 

 
 

© 2016, https:. All rights reserved. On republishing this post, you must provide link to original post

Leave a Reply.. code can be added in <code> </code> tags