Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views :
Please Disable your AdBlocker!

We are not spamming! We use Google Adsense for running this web free.

img
Home / Software Development / Avoiding jQuery conflict with prototype.js and other js files in Magento or other website

Avoiding jQuery conflict with prototype.js and other js files in Magento or other website

221 Views

Most of the web developers face the problem in jQuery conflict with conflict.js in Magento or other web development. Here the solution for avoiding conflict the js files with jQuery and prototype.js or Mootools js.

This article mainly targeting on

  • How to solve jQuery Conflict?
  • jQuery Conflict with my javascript file.
  • jQuery Conflict error on the prototype.js.

Contents

  1. Introduction of js conflict
  2. Detailing of the conflict error.
  3. Solving the error.

 

  • Introduction of jQuery conflict

All the website plugins and custom js files mostly contain the jQuery namespace. As a general rule jQuery namespace stored with global objects. so you shouldn’t clash with jQuery and other js like prototype js and YUI etc.

  • Detailing of the conflict error.

jQuery.noConflict restore the $ variable so that it is no longer an alias for jQuery. Apart from just calling once, not much more than you really need to do. However, you can create your own alias with the return value, if desired:

<script type="text/javascript">
$.noConflict();
</script>

  • Solving the error

And generally, you need to add this after calling the jQuery and js like and

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/path/prototype.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>

Run you the website that error occurs and open the console in whatever browser you used. Find the error will come from which js file. I that file mostly using the $ for jQuery call.

So get a backup that file and open that js file in your editor (Whatever you use). My preferred is Sublime Text you can download from here.

And (ctrl+f or ctrl+h) to find all $ and replace this with jQuery syntax. And upload the js file to your server or local refresh the web page following this method for all js file you have until error will not show.

That all. Have you any doubts or more information comment on the comment box.

Happy Coding.

  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest
  • stumbleupon
  • Reddit
This div height required for enabling the sticky sidebar