How to re-render currently selected calendar cell with a4j:s

[wbervoet]

Hi,

I have the following richfaces calendar:

<rich:calendar
id="date"
popup="false"
value="#{calendarDataModel.selectedDate}"
dataModel="#{calendarDataModel}"
valueChangeListener="#{calendarDataModel.onForbiddenDateSelect}"
inputClass="ic"
buttonClass="bc"
cellHeight="50"
cellWidth="50"
mode="ajax"
ajaxSingle="true"
showWeeksBar="false"
showScrollerBar="false">

<a4j:support event="ondateselected" reRender="calRegion">
</a4j:support>
</rich:calendar>

Right now when a date is selected a region is rerendered. What I would like to be able todo is to rerender the selected date. Is this possible?

Rerendering the whole region gives some flashing effects, but only the color of the cell is updated so I would like to limit the reRender region.

Maybe I can change the color of the cell via javascript eg:

$('form:date').component.getSelectedDate(); but to change the style I should be able to get the id of the cell so I can do getElementById.

Any ideas?

Thanks,
Wim

[ilya_shaikovsky]

could you reRender just calendar by its Id?

[wbervoet]

that is a possibility, but the calendar still flashes then. (eg. in Firefox and IE)
It's normal of course as the calendar is fully re-rendered. So I would still need to have some more finer grained control.

[ilya_shaikovsky]

Why you can't just use client side rich-calendar-select style class redefinition?

[ilya_shaikovsky]

or to change class you may use own JS functions like:

function beforeSelect(event){
 var cell = $(event.rich.component.selectedDateCellId);
 if (cell)
 {
 Element.removeClassName(cel, "myFontClass");
 }
 }
 function afterSelect(event){
 var cell = $(event.rich.component.selectedDateCellId);
 if (cell)
 {
 Element.addClassName(cel, "myFontClass");
 }
 }

and the calendar like:

<rich:calendar popup="false" ondateselect="beforeSelect(event)" ondateselected="afterSelect(event)"/>

[wbervoet]

Hi,

thanks for the suggestions already.

Here is what I have right now:

<rich:calendar
 id="date"
 popup="false"
 value="#{calendarDataModel.selectedDate}"
 dataModel="#{calendarDataModel}"
 valueChangeListener="#{calendarDataModel.onForbiddenDateSelect}"
 inputClass="ic"
 buttonClass="bc"
 cellHeight="50"
 cellWidth="50"
 mode="ajax"
 ajaxSingle="true"
 showWeeksBar="false"
 showScrollerBar="false"
 ondateselected="afterSelect(event)">

 <a4j:support event="ondateselected" reRender="calRegion, save">
 </a4j:support>
 </rich:calendar>


 <script type="text/javascript">
 //<![CDATA[
 function afterSelect(event){
 var cell = $(event.rich.component.selectedDateCellId);
 if (cell)
 {
 Element.addClassName(cell, "rich-calendar-selected");
 }
 }
 //]]>
 </script>

Problem here is that the javascript gets executed ok ondateselected, but the reRender is not done anymore ondateselected.

If I change the JS to ondateselect then both the reRender and the javascript is done, but it's not the required effect
(I only need to change background color after select, if I then change another date I don't need todo any beforeSelect to remove the background)

Yes I know it sounds a bit weird maybe, but what the business wants is a calendar where they can click on few dates (they become red and are marked invalid serverside so they are not selectable anymore by non-admin users afterwards)

Wim

[wbervoet]

I changed the a4j:support to

<a4j:support event="ondateselected" reRender="calRegion, save" onsubmit="afterSelect(event)">
</a4j:support>

and removed the ondateselected attribute on <rich:calendar>

... now it is working! :-)

Wim