JSF <t:inputCalendar> tag incompatible with Jquery!!!!

[Asish Chakraborty]

In a project using JSF, I am importing the Jquery library(jquery.min.js) to do some ajax call. In the same page I have a <t:inputCalendar> tag as follows.

<t:inputCalendar id="neweffectivePerioddateFrom" forceIdIndex="false" value="#{a.fromDate}"
styleClass="TextBoxStyle" align="right" popupDateFormat="MMM-dd-yyyy" renderAsPopup="true"
renderPopupButtonAsImage="true" style="width:150" maxlength="11" popupButtonImageUrl="/images/Icon_calendar.gif"
onmousedown="return clickIcon(this)" onkeydown="return clickIcon(this)" title="Enter the start date" popupLeft="true" >
<f:convertDateTime pattern="MMM-dd-yyyy" timeZone="IST" />
</t:inputCalendar>

The problem is that when the calendar comes as a pop-up and I try to select a date, nothing happens. I am not even able to close the calendar pop-up. But when I remove the Jquery part along with the import part of the Jquery library, the calendar works!!!

Not having any idea about it. Please help.

[Inna Za]

This is a conflict of jquery.js and prototype.js. This inputCalendar uses Prototype is a JavaScript Framework. Conflict is near the usage of $ symbol.
To fix this problem you can use this code, that you put after your java scripts includes:

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

you will declare another symbol for jquery and then you can use calls of jquery methods like this

    $j.ajax({ ...

[Tim Holloway]

That was over a year ago. Probably didn't help him.

Oh well...

[Inna Za]

Tim Holloway wrote:That was over a year ago. Probably didn't help him.

Oh well...

I've decided to answer because I had the same trouble. It may help someone else next year :-)