More DHTML Goodness
This calendar demo just won't stop giving! Take yet another look at it. Double-click a day now and instead of opening the form in a new page it pops up a little form with the date pre-set and you just enter a title and then enter. The form uses Ajax to create the new entry and JavaScript inserts it in to the calendar without needing to round-trip to the server.
Best of all I've done this in an accessible way. Disable JavaScript and/or CSS the whole thing still functions!
While messing about with that I added another feature to the entry form itself. Notice the "accordion" effect on the form. This is sometimes a nice alternative to tabs. It means we can keep the linear nature of the form and still keep it from taking up more real estate than needs be.
That form probably isn't a great example of its use as it's not that long really. Better used on long complicated forms!
Again, note that the form still looks like a form when JS/CSS are disabled. This is helped by the fact that the form uses a definition list (DL) element to layout fields or sections of fields. Using DLs for forms is something I've started doing more and more of recent. If you haven't tried, I suggest you do. You can nest DLs inside the DD of another to create indented meaning in a form.
Download coming tomorrow. Promise.
Skip to the 
You can subscribe to an individual
Jake, there's a "bug" with the calendar ...
1) Add a new calendary entry.
2) Click on the calendar entry to view more details.
3) Click on the back button.
4) Hey, where did my calendar entry go?!
If you refresh the page, the entry shows up.
I had this problem with some intranet applications - used ajax for searching, and when the users clicked on the back button, the results would be missing. Had to add code to make the page's content persistent ...
Not really a bug Richard. Just cacheing in action.
Really nice! When one clicks on the "add" button to add an event perhaps some feedback for the user ;). I pressed the add button twice not realizing that the form was submitted already.
@Jay: Did the same, only I was more impatient, and pressed it six times. It works in Opera.. :)
The simplest way to stop this is to disable the button/switch to a descriptive label (value) until the XmlHTTPRequest is complete.
Great stuff Jake...
I have been working on a calendar app as well...I added in some code to bring up the current entries in a new layer on the current page to prevent having to go to a new url and then clicking the back button to get back to the calendar. I still need to work on making it as degradable as yours...(although not a requirement as my user base has a standard browser config as this is a intranet site). Keep up all of the great work and thanks for sharing!
Ger
Appreciate the feedback guys, as always, but let's not forget this isn't meant to be useable calendar app. It's just a demo of using a WQO that I got carried away with. As such, it's lacking in many respects. Whether it turns in to an app in its own right remains to be seen. In the mean time please don't take what you see as measure of the quality of my work. Yeah, you can submit the ajax form with no title, etc etc.
The problem I've come up against when using AJAX in my Notes apps, occurs when I'm developing for an Intranet, and therefore am not using www in the URL. Does this calendar work under those circumstances? I know my statement's rather vague - I can elaborate if need be.
Take the www out of www.codestore.net in the example and see Karen ;o)
Another nice example, Jake.
I too have started using definition lists for forms having experimented with a number of other methods before "discovering" definition lists. One of the complaints people often make about laying out a form without using tables is how much more complex the HTML becomes, which is probably true if you're trying to fudge it with divs and unordered lists. But with definition lists I would say the HTML becomes even easier than using tables. I'm a convert, anyway!
Pretty slick and functional Jake - one suggestion though...
{Link}
Make the pop-up form emulate an actual dialog box - give it a top border, X at the right to close/cancel the form, and the ability to drag it around on the screen.
This way, you can take that pop-up form and actually make it that much more dynamic.
If you need help or code, lemme know!
-Chris
Oh sure, if I want to find out the EASY way. (laugh) I'll wait for the code and see what's different from the stuff I have tried.
Chris. My mind races when I start to think of how it could be improved. As ever it's a matter of time restraints and knowing when to stop. T'was never even meant to be a calendar after all...
Karen. Let me know if you still can't work it out and I'll try to help. There's no reason the lack of www in a URL or a site being on an intranet should affect how ajax works.
Very nice! One point on the accessibility...I thought that in order for a form to be accessible to assistive technologies, all input fields need to have a <label> tag associated with them. Does the definition list components take the place of the label for screen readers?
You're probably right Michelle. I wasn't saying this is the de facto way to make things accessible. There's always more to it than that. This was just me saying this is how to ensure the form works without JS - thus making it "accessible".
DL doesn't do the job of LABEL.
Hi Jake,
I'm having trouble getting the accordion effect to work on the entry form. It does not work the same way as your online demo does.
All the 'sections' are expanded and when you click on a 'section' it closes up then drops open again.
The online demo works fine for me so I am ruling out the browser as a suspect.
Any pointers gratefully received.
I'm running Notes 7.02 and IE6.
Kind regards
Alan
You beat me to it Alan...
Do I win the 'Dumbass of the week' award?