Question

47

How do I implement JQuery.noConflict() ?

rated 0 times [ 53] [ 6] / answers: 1 / hits: 140738 / 13 Years ago, mon, october 24, 2011, 12:00:00

I am using both javascript and jquery code on the same html page. For some reason, the jQuery library is stopping my native javascript code from working properly.

I found this page: jQuery No Conflict that says you can use a jquery.noConflict to release $ back to javascript. However, I'm not sure how to do this?

Specifically, I'm not sure how to implement this correctly? Where does the the Jquery code go, where does the JS code go?

My code is below:

<script type=text/javascript>

  $.noConflict();

  // Code that uses other library's $ can follow here.

</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kourtney

Add To Favorites

Follow

Total Points: 368

Total Questions: 103

Total Answers: 85

Location: Bonaire

Member since Sat, May 1, 2021

3 Years ago

kourtney questions

1 Problem with typescript while making request to SWR

Sun, Oct 4, 20, 00:00, 4 Years ago

1 JS DateTimePicker onChange event not working

Tue, Oct 29, 19, 00:00, 5 Years ago

1 NodeJS and Sharp, BMP to PNG Error: Input file contains unsupported image format

Fri, May 24, 19, 00:00, 5 Years ago

1 React Slick slider map not showing slides?

Thu, Apr 4, 19, 00:00, 5 Years ago

1 Cypress - Add custom header for all XHR requests

Fri, Mar 1, 19, 00:00, 5 Years ago

View All

answered 13 Years ago beatrizrheaq · Accepted Answer

jQuery.noConflict will reset the $ variable so it's no longer an alias of jQuery. Aside from just calling it once, there's not much else you really need to do. Though, you can create your own alias with the return value, if you'd like:

var jq = jQuery.noConflict();

And, generally, you want to do this right after including jQuery and any plugins:

<script type=text/javascript src=/path/to/jquery.js></script>

<script type=text/javascript src=/path/to/jquery-plugin.js></script>

<script type=text/javascript>

  jQuery.noConflict();

  // Code that uses other library's $ can follow here.

</script>

<script type=text/javascript src=/path/to/prototype.js></script>

You can also go one step further and free up jQuery with noConflict(true). Though, if you take this route, you'll definitely want an alias as neither $ nor jQuery will probably be what you want:

var jq = jQuery.noConflict(true);

I think this last option is mostly used for mixing versions of jQuery, particularly for out-dated plugins when you want to update jQuery itself:

<script type=text/javascript src=jquery-1.4.4.js></script>

<script type=text/javascript src=jquery-older-plugin.js></script>

<script type=text/javascript>

    var jq144 = jQuery.noConflict(true);

</script>

<script type=text/javascript src=jquery-1.6.4.js></script>

<script type=text/javascript src=jquery-newer-plugin.js></script>