Ressolving Javascript/JQuery Conflict in wordpress

Using javascript libraries will save you more time coding yourself to design and create your own program to meet as what designed or what you wanted for your website to function. Well, there are a lot of Javascript libraries you can use just for example below:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Mootools – a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

YUI 3 is Yahoo!’s next-generation JavaScript and CSS library. It powers the new Yahoo! homepage, Yahoo! Mail, and many other Yahoo! sites. The YUI 3 Library has been redesigned and rewritten from the ground up incorporating what we’ve learned in five years of dedicated library development. The library includes the core components, a full suite of utilities, the Widget Infrastructure, a growing collection of widgets, CSS resources, and tools. All YUI components are BSD-licensed and are available for forking and contribution on GitHub. In addition to the core components included in the YUI 3 Library, there is also a gallery of components created by developers in the YUI community that provide additional functionality leveraging YUI 3 that can be used in the development of robust web applications.
script.aculo.us is a set of JavaScript libraries to enhance the user interface of web sites. It provides an visual effects engine, a drag and drop library (including sortable lists), a couple of controls (Ajax-based autocompletion, in-place editing, sliders) and more.

They are both powerful but it is really recommended that you use only one of them because that will mess up your site and might caused  all your javascript code conflict .

However,  WordPress created a function to handle such like that see
wp enqueue script

There are also chances that even you are using jQuery library still you can experience jquery undefined error.

How to Solve that?

JQuery reserved  a script to fix that is call jQuery no conflict. How can we use it?

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

You can also do something like this:
<script type="text/javascript">
   jQuery(document).ready(function($){
        //some of your codes uses $ as its prefix.
        $('.example').fadeOut();
    });
</script>

or something like this:

<script type="text/javascript">
   var $ = jQuery.noConflict();
   $(document).ready(function(){
        //some of your codes uses $ as its prefix.
        $('.example').fadeOut();
    });
</script>

or create a new instance of jQuery library class:

<script type="text/javascript">
 var j=jQuery.noConflict();
  j(document).ready(function($){
        //some of your codes uses $ as its prefix.
        j('.example').fadeOut();
    });
</script>

You can replace j on whatever variables you want to rename it.

 

 

Your Guide to Wireless Internet
and High-Speed Internet Providers
and Technology
www.wirelessinternet.net

1 Response to "Ressolving Javascript/JQuery Conflict in wordpress"

Leave a Comment

*