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.
Archived Comments
Rather then submit the whole form (unless that is necessary) he could have used getURL like this too:
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/suppor...
Nice Todd. Is there a built in URL encode function that could be used for the first example?
You could do this:
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.
I am using the following code to change the source of a CFDIV when a date is selected.
<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 ?
You can do a POST with CF.navigate - check the docs.
In AS, there's also a
DateField.dateToString(myDate, "MM/DD/YYYY")
to convert a date to a string formatted however you want.
I use the method
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?
It's not an error - when you re-select the date it sets the value to blank/null/undefined. You can switch to a JS function and conditionally send the user to another page if the date exists/is not blank.
Works EXACTLY as I need it to... BUT
This test page will not work in IE7. I have NO idea why.
IT works fine in Firefox.
http://www.festing.com/test...
Here is my entire page...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1...">
<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.
I ran your test page through my IE debugging tools. This is what I found. Two script errors. Also, I ran you code you posted on my cfmx 7.02 server and it works fine.
---------------
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...
//----------------
-------------
Script Error:
//----------------
Line: 5
Character: 1
Code: 0
Error Message: Object doesn't support this property or method
URL: http://www.festing.com/CFID...
//----------------
Regards