Using DateChooser component to open html

[graines]

Hi all. I have what I originally thought to be a very easy task, but am now scratching my head.

I would like to use Flash MX 2004's Date Chooser calendar to popup an html file for whatever day is clicked.

-My problem is that, although I'm sure it's very simple, I do not know how to trigger an "on click" event using this compenent.

- My other problem is that I have 730 (2 years) worth of days that will have a html page open when clicked. Yes, that's 730 html pages that I will be building. Is there actionscript that can be written to open an html page depending on what day/month/year is clicked (Example...01/04/01.html, 01/04/02.html, etc.) so I dont have to write 730 lines of "on click open Page456.html" or whatever code?

If something like this is more complicated than I am expecting, I would be willing to pay $$.

Help would be MUCH appreciated. I have an approching deadline :eek:
Greg

[petefs]

From the FMX2004 documentation:

form.change = function(eventObj){
trace("date selected " + eventObj.target.selectedDate) ;
}
myDC.addEventListener("change", form);


where myDC is your DateChooser instance. If you look into the date class you should be able to figure out how to format the date in such a way that you can format a getURL string ^_^ If you have any more questions, just post em up : )

[graines]

Thanks for the reply Pete. I am reading up on how you suggested I do this...

Quick question though...How do I make an html file open when clicking a date?

If I can do that than at least worse case scenario I repeat that same action 760 times....better than not being able to do the project at all.

[petefs]

replace the trace command with a getURL command : )

the eventObj.target.selectedDate holds a Date object that is equivalent to the date that was clicked. By looking into the Date class you should see how to format that Date object to create an URL for you to click. You won't have to write 760 different conditionals for it ^_^.

If you're still confused I'll make a working example in a few minutes -- i've got to tackle a few work things first ^_^

[petefs]

allright, here ya go. Right now it will only trace the URL -- use getURL to open an .html page instead of course : )

Put a DateChooser component on your stage and give it the instance name myDateChooser

then in the _root timeline add this code:


dcLO = new Object();
dcLO.change = function(eventObj)
{
var sDate:Date = eventObj.target.selectedDate;
var URI:String = sDate.getDay() + "/" + sDate.getMonth() + "/" + String(sDate.getFullYear()).substr(2,2) + ".html";
trace(URI);
}
myDateChooser.addEventListener("change", dcLO);


any more problems, let me know ^_^

[graines]

That's what I needed...thanks a lot for your help Pete.

Good stuff.

[petefs]

no problem, have fun! : )

[graines]

Me again * First let me say (Pete) that you were very helpful. The project is just about finished and it works great. Much much appreciation.

I just noticed though that if you select the same day a second time you get "NaN-undefined-undefined". The day/month/year become undefined..?

If it helps, here is the script so far:

************************************************** ********
myDateListener = new Object();

myDateListener.change = function(eventObj)
{
var eventSource = eventObj.target;

var theSelectedDate = eventSource.selectedDate;
// format the date
var theDate = theSelectedDate.getDate();
var theMonth = theSelectedDate.getMonth() + 1;
var theYear = theSelectedDate.getFullYear();
var formattedDate = theMonth + "-" + theDate + "-"+ theYear;

var URI:String = formattedDate + ".htm";
trace(URI);
getURL(URI, "_SELF");


// compose the message
msg = "You selected " + formattedDate;

// display the message
statusMessage.text = msg;
}
myDateChooser.addEventListener ("change", myDateListener);
myDateListener = new Object();
************************************************** *******

Any ideas as to why it might be doing that?

[graines]

I'm going to go ahead and anwser this one for myself.

If a user clicks the same date twice it becomes deselected, returning an undefined value...hence my problem.

I am just having the script check to see if part of the date is undefined. If it is then I have the script halt..or give a null value.

if (theDate == undefined) {
return;

I placed this before the event triggers the getURL and after the variable for the date is defined.

At least I think that is what I've done...works none the less.

I've attached the fla for those interested.

[Mr_Mikes]

Thank you both for your insight...I've been trying to do the same for quite some time.

I'm trying to work on a variation whereby an external text file with CSS gets loaded into a text box instead of a URL. I can load everything perfectly outside of the event listener, but when I try to define the external text file inside the listener with the "URI" variable, nothing loads.

Any ideas?

I used the same code from the previous post...that is, with the addition of the loadVars section that is in color.


myDateListener = new Object();

myDateListener.change = function(eventObj)
{
var eventSource = eventObj.target;

var theSelectedDate = eventSource.selectedDate;
// format the date
var theDate = theSelectedDate.getDate();
var theMonth = theSelectedDate.getMonth() + 1;
var theYear = theSelectedDate.getFullYear();
var formattedDate = theMonth + "-" + theDate + "-"+ theYear;
// In case the user clicks the same date twice
if (theDate == undefined) {
return;
}
var URI:String = formattedDate + ".txt";
trace(URI);

myStyle = new TextField.StyleSheet();
myStyle.load("events.css");
TextHolder.styleSheet = myStyle;
thisText = new LoadVars();
thisText.load(URI);
thisText.onLoad = function(success) {
if (success) {
TextHolder.text = thisText.myText;
}
};
// compose the message
msg = "You selected " + formattedDate;

// display the message
statusMessage.text = msg;
}

myDateChooser.addEventListener ("change", myDateListener);
myDateListener = new Object();

//************************************************** ***************
// (Year, month, day) 0 = Jan 11 = Dec
//************************************************** ***************
myDateChooser.selectableRange = {rangeStart:new Date(2003, 0, 15),
rangeEnd:new Date(2004, 11, 31)}

[petefs]

when you declare a variable using 'var' it's declared in local scope. In the case of your script, formattedDate is declared locally to the .change method of myDateListener -- therefore it is not accessible outside of that function.

you can either scope formattedDate outside of myDateListener.change by removing 'var' (which will defined the variable in the same scope as myDateListener) or wrap the loading code in a function that accepts an argument and call that function from myDateListener.change passing formattedDate as the argument.

If you have any more questions let me know : )

[Mr_Mikes]

Thank you for your quick response.... I'll give it a try.
Peace,
Danny :)

[real19]

Thanks guys. It will benefit me a lot. What I would like to do is basically something that opens within a flash file (not HTML) and gives the list of events. I want to create something similar to this one you just posted but I need it to call an external file that would populate the text area inside of flash file. can you help? I need to do it within the next 4 days (wednesday) or I wont get this job i have applied for.

All your help would much appreciated. :confused:

Thanks.

Thank you both for your insight...I've been trying to do the same for quite some time.

I'm trying to work on a variation whereby an external text file with CSS gets loaded into a text box instead of a URL. I can load everything perfectly outside of the event listener, but when I try to define the external text file inside the listener with the "URI" variable, nothing loads.

Any ideas?

I used the same code from the previous post...that is, with the addition of the loadVars section that is in color.


myDateListener = new Object();

myDateListener.change = function(eventObj)
{
var eventSource = eventObj.target;

var theSelectedDate = eventSource.selectedDate;
// format the date
var theDate = theSelectedDate.getDate();
var theMonth = theSelectedDate.getMonth() + 1;
var theYear = theSelectedDate.getFullYear();
var formattedDate = theMonth + "-" + theDate + "-"+ theYear;
// In case the user clicks the same date twice
if (theDate == undefined) {
return;
}
var URI:String = formattedDate + ".txt";
trace(URI);

myStyle = new TextField.StyleSheet();
myStyle.load("events.css");
TextHolder.styleSheet = myStyle;
thisText = new LoadVars();
thisText.load(URI);
thisText.onLoad = function(success) {
if (success) {
TextHolder.text = thisText.myText;
}
};
// compose the message
msg = "You selected " + formattedDate;

// display the message
statusMessage.text = msg;
}

myDateChooser.addEventListener ("change", myDateListener);
myDateListener = new Object();

//************************************************** ***************
// (Year, month, day) 0 = Jan 11 = Dec
//************************************************** ***************
myDateChooser.selectableRange = {rangeStart:new Date(2003, 0, 15),
rangeEnd:new Date(2004, 11, 31)}