Properly Using Multiple jQuery Functions
18th of April, 2009 in the year of our Lord
Each time I design/develop a new website, I try to learn at least one new thing.
I’m using LightWindow to display some of my work in my portfolio. LightWindow uses JavaScript, as does the method I used to display my latest tweet. I don’t really understand why, but whichever of the .js files was linked to last was the only one that would work. Speaking with my friend Joel led me to the solution.
I had to run the function jQuery.noConflict() and replace each $ with jQuery. It’s explained in more detail on the jQuery site, so if you’re still having trouble, I suggest looking there.
Here’s how my code looks now:
<script src="http://curtisblackwell.com/js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function(){
jQuery.getJSON('http://twitter.com/status/user_timeline/curtisblackwell.json?count=1&callback=?', function(data){
jQuery.each(data, function(index, item){
jQuery('#tweetscreen').append('<div id="tweetz"><p id="last-tweet">' + item.text + '<span id="blink">' + '|' + '</span>' + '</p></div>');
});
});
});
</script>
<script type="text/javascript" src="/lightwindow/javascript/prototype.js"></script>
<script type="text/javascript" src="/lightwindow/javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/lightwindow/javascript/lightwindow.js"></script>
<link rel="stylesheet" href="/lightwindow/css/lightwindow.css" type="text/css" media="screen" />
<!-- EDIT -->
I have since linked to a javascript file so that my page validates, but the code is the same.
3rd of October, 2009
To shed light on the reason why only one of the files was working:
Lightwindow uses the Scriptaculous Javascript library, which reserves the ‘$’ as a shortcut. The jQuery.noConflict function is then required, to change jQuery’s shortcut from the ‘$’ to just ‘jQuery’. This way, each library knows which pieces of code to look at. (I believe this is the case with most javascript libraries.)
Often times, I do something like this: var jq = jQuery.noConflict();
so that my functions look like this: jq(‘#test’).click(function(){});