Ask a Jedi: Loading a Page with CFCALENDAR
Anthony asks a question about the CFCALENDAR tag:
I have a simple one... I think. I need to find out how to goto a URL when a date is selected using CFCalendar.For instance, I choose Oct 17, I want to goto a page a date page with url.date eq "2007-10-17"
I don't know flash, and have no idea how to accomplish what appears to be a simple operation.
Now technically I don't answer questions involving Flash Form stuff anymore. It was a fun feature, but in my opinion I'd use Flex 2 instead. But the calendar tag works in HTML forms as well so I thought I'd take a stab at this.
The docs for cfcalendar mention that it does indeed have an onChange event. However - you have to use ActionScript for this event. Now in theory - the calendar tag is just a Flex control. However - I had no idea what the control was, nor how to extra the current selected date. So I cheated. I know there is a getURL ActionScript function. This will fire off any URL, including a JavaScript one. So I began with this:
<cfform name="myform" action="test3.cfm">
<cfcalendar name="cal" onChange="getURL('javascript:test()')">
</cfform>
All this says is - when the date is selected, run the JavaScript function test (poorly named, I know). My test function then just does this:
<script>
function test() {
document.myform.submit();
}
</script>
As you can see - it submits the form. You would then write code to say if form.cal exists, cflocation and pass along the value.
Comments
getURL('testdate.cfm?date='+escape(testCal.selectedDate), '_blank');
But if you dump the date you'll notice that CF does not grok the AS dateformat and you'll get a bogus year.
So maybe your solution is the way to go - or my second example above.
<script language="javascript">
function calendarChanged(day, month, year) {
ColdFusion.navigate(
'#cgi.scriptname#?action=activities&selectedDayStr=' + day + ',' + month + ',' + year,
'mydiv');
}
</script>
<cfform name="myform" action="test3.cfm">
<cfcalendar name="cal"
onchange="getURL('javascript:calendarChanged(\'' + selectedDate.selectedDate.getDate() + '\',\''+ (selectedDate.selectedDate.getMonth()+1) + '\',\''+ selectedDate.selectedDate.getFullYear() + '\')')">
</cfform>
I did not think of just submitting the FORM, but is it possible to make change the target, so it is connected (is that the right word?) to a CFDIV ?
DateField.dateToString(myDate, "MM/DD/YYYY")
to convert a date to a string formatted however you want.
onchange="getURL('test.cfm?month=
'+(testCal.selectedDate.getMonth()+1)+
'&day='+testCal.selectedDate.getDate()+
'&year='+testCal.selectedDate.getFullYear(),
'_blank');"
But if i click on the date already chosen I get a
undefined-NaN-undefined
Month undefined
date not a number
Year undefined.
How can I prevent this error?
This test page will not work in IE7. I have NO idea why.
IT works fine in Firefox.
http://www.festing.com/test.cfm
Here is my entire page...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...;
<html>
<head>
</head>
<body>
<cfform name="abc">
<cfcalendar name="testCal" width="250"
onchange="getURL('test.cfm?date='+testCal.selectedDate.getFullYear()+'-'+(testCal.selectedDate.getMonth()+1)+'-'+testCal.selectedDate.getDate(), '_self');"
>
</cfform>
</body>
</html>
Since this is not working, and I have not idea why, and I need a calendar jump... I'd like to know what/where/how to see and example of a Flex2 calendar.
---------------
Script Error Informations:
====================
OS Information: Microsoft Windows XP Professional Service Pack 2 (Build 2600)
OS Language: en-us
Browser: Microsoft Internet Explorer 4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727) 0
Web Browser Language: en-us
User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Cookies enabled
Java enabled
-------------
Script Error:
//----------------
Line: 53
Character: 1
Code: 0
Error Message: Object expected
URL: http://www.festing.com/test.cfm
//----------------
-------------
Script Error:
//----------------
Line: 5
Character: 1
Code: 0
Error Message: Object doesn't support this property or method
URL: http://www.festing.com/CFIDE/scripts/cfformhistory...
//----------------
Regards
onchange="getURL('test.cfm?date='+testCal.selectedDate, '_blank');"
Now be careful because that will pass the full date format (regardless of any mask applied to the tag) which would look like this:
test.cfm?date=Wed Oct 17 00:00:00 GMT-0400 2007
You could also get fancier with ActionScript and do something like this (broken out on seperate lines for readability:
onchange="getURL('test.cfm?month=
'+(testCal.selectedDate.getMonth()+1)+
'&day='+testCal.selectedDate.getDate()+
'&year='+testCal.selectedDate.getFullYear(),
'_blank');"
Note that I add 1 to the month because of the wonderful zero-based index in flashWhich would evaluate to:
test.cfm?month=10&day=19&year=2007
It's a good idea to keep the old AS dictionary bookmarked to help with simple AS functions like this when the need arrises:
http://www.adobe.com/support/flash/action_scripts/...