datepicker is not a function

AUGGGHH! Why doesn't this work! Such is the cry of any hacky developer running around cobbling together pieces of code and examples to get something to work. All while trying to learn whatever he's working on at the same time. Anyway recently I tried to use jQuery's datepicker function in one of my pages. I consistently got the error datepicker is not a function. I tried all sorts of things but nothing worked. Well it turns out I was using prototype and another javascript library called tablekit. Now they both use the $ as a shortcut to refer to themselves, and so does jquery. So when you try to use them together there's a conflict. Fortunately jQuery provides a very nice solution to this (you can read more about it here.

Here's what I ended up doing:

<!-- jQuery JS Includes -->
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>

<script>
  var $j = jQuery.noConflict();
</script>

<script type="text/javascript" src="jquery/ui.core.js"></script>
<script type="text/javascript" src="jquery/ui.datepicker.js"></script>
<script src="javascripts/scriptaculous.js?load=effects,builder,dragdrop" type="text/javascript"></script>

Now to you use $j instead of $ in all your jQuery code.

     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j("div").hide();
     });
     
     // Use Prototype with $(...), etc.
     $('someid').hide();