{"id":430,"date":"2009-07-07T10:40:18","date_gmt":"2009-07-07T15:40:18","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=430"},"modified":"2009-07-07T10:40:18","modified_gmt":"2009-07-07T15:40:18","slug":"runing-jquery-with-other-frameworks-via-noconflict","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/runing-jquery-with-other-frameworks-via-noconflict\/","title":{"rendered":"Running jQuery with Other Frameworks Via noConflict"},"content":{"rendered":"

\"Photo<\/a><\/p>\n

While jQuery<\/a> is certainly a popular JavaScript framework, it’s by no means the only game in town. Other frameworks such as Prototype<\/a>, MooTools<\/a>, Dojo<\/a> and many others all have their own strengths, weaknesses, and devoted groupies.<\/p>\n

Generally speaking, these frameworks all play well together — you can mix and match framework functionality to your heart’s content, as long as you don’t mind the additional overhead of loading several libraries simultaneously. So you have a calendar widget in jQuery that you love, but you’re already using Prototype to animate your navigation bar? Don’t be shy… use both!<\/p>\n

Of course, every once in a while you can run in to problems when combining JS frameworks — particularly (in my experience) when combining jQuery and Prototype. Luckily, jQuery was kind enough to provide us with a workaround.<\/p>\n

The Problem: Sharing Syntax<\/h3>\n

The most common compatibility problem stems from both jQuery and Prototype using the same shortcut syntax: namely, the $().doSomething<\/em> syntax. Here’s a sample line of code in jQuery:<\/p>\n

$('#myelement').addClass('active');<\/pre>\n
And the same functionality in Prototype:<\/p>\n
$('myelement').addClassName('active');<\/pre>\n
Note the basic similarity? Both frameworks claim the dollar sign notation for themselves, which can wreak havoc on snippets of code dropped willy-nilly into a website. If your jQuery code is grabbed up by Prototype, things will stop working fast. And similarly, if your Prototype code is snagged by jQuery, not even the awesome power of jQuery will be enough to overcome the code confusion.<\/p>\n
The Solution: noConflict Mode<\/h3>\n
But not to worry! jQuery has provided us with a workaround called “noConflict mode.”<\/p>\n
By default, there are two equally correct ways to call a jQuery function — the dollar sign notation, and “jQuery” notation:<\/p>\n
$('#myelement').show();\njQuery('#myelement').show();<\/pre>\n
Both of the lines above do exactly the same thing. However, most people use and prefer the dollar sign notation. Why? Probably because it’s shorter, and if web developers didn’t care about brevity in their code, they probably wouldn’t have used a framework in the first place.<\/p>\n
Of course, just using the longer jQuery notation isn’t enough. If jQuery has already claimed the dollar sign for itself, any Prototype functionality relying on that notation will still be grabbed by jQuery. <\/p>\n
This is where the noConflict function comes in handy. Simply run the following line after both Prototype and jQuery have been loaded:<\/p>\n
jQuery.noConflict();<\/pre>\n
This will cause jQuery to give up the dollar-sign notation, allowing the other library to take it over. And you can still use your jQuery snippet, provided you change all instances of $() to jQuery().<\/p>\n
Keeping it Short<\/h3>\n
The noConflict mode does have one other bit of functionality that I’ve found useful in some of my projects: you can select a different variable to use instead of the standard “jQuery”. The usage looks like this:<\/p>\n
var $j = jQuery.noConflict();<\/pre>\n
Now in addition to using the default jQuery() notation, I can also use the shorter $j() notation. This allows me to avoid running into problems with other frameworks, while still enjoying almost the same conciseness in my code.<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
While there’s nothing to stop you from using multiple frameworks simultaneously, compatability problems can pop up — particularly between jQuery and Prototype. Luckily, there’s a simple solution called noConflict mode. […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[168,170,180,184],"tags":[248,55,291,293,305,308,309,329],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/430"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=430"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/430\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}