jQuery watermark throwing TypeError: object is not a function

Question

I am writing my first jQuery and getting an Uncaught TypeError: object is not a function . The first part of the code that initially sets the watermark is fine. However both the blur and focus functions throw an error when I try to access the .val() of the input field. Any one know the reason why?

jQ(document).ready(function($) {
var $watermark = 'dd-MMM-yyyy';
var $calendarVal = $('#tabForm\\:opStartInputDate').val(); /* this works no problem */
if ($calendarVal == null || $calendarVal == '')
{
    alert('Inside null or empty conditional');
    $('#tabForm\\:opStartInputDate').val($watermark).addClass('watermark');  /* this works no problem */
}
$('#tabForm\\:opStartInputDate').blur(function($){
    var blurCalendarVal = $('#tabForm\\:opStartInputDate').val();  /* this line throws the error */
    if (blurCalendarVal == null || blurCalendarVal == '' || blurCalendarVal.length == 0)
    {
        alert('Inside blur function conditional');  /* Never make it here */
        $('#tabForm\\:opStartInputDate').val(watermark).addClass('watermark');
    }
})
$('#tabForm\\:opStartInputDate').focus(function($){
    /*if ($(this).val() == watermark) This is commented out but this throws the error as well
    {
        $(this).val('').removeClass('watermark');
    }*/
    var $focusCalendarVal = $('#tabForm\\:opStartInputDate').val(); /* this line throws the error */
    var $watermarkDate = 'dd/MMM/yyyy';
    if ($focusCalendarVal == $watermarkDate)
    {
        alert('Inside focus function conditional');
        $('#tabForm\\:opStartInputDate').val('').removeClass('watermark');
    }
})

});

Answer 1

This line:

$('#tabForm\\:opStartInputDate').blur(function($){

you are remapping $ to be the event object passed into the handler. Use a different parameter name, like e or event .

$('#tabForm\\:opStartInputDate').blur(function(e){ // fixed

---

I assume your confusion stems from the opening line

jQ(document).ready(function($) {

The jQuery().ready() handler receives jQuery as its first argument, so using $ here ensures that $ is jQuery inside the ready handler. However, you have copied this incorrectly into your event handlers, which receive an Event object as their first argument. In the lines throwing errors, you are essentially calling Event(...) instead of jQuery(...) , hence the error object is not a function.