Create a File-based Blog using Jaxer | WebReference

Create a File-based Blog using Jaxer

By Rob Gravelle


[next]

In the Your First Server-side JavaScript Application article, we learned how to write server-side JavaScript for the Jaxer plug-in by building a simple file-based blog in Aptana Studio. Today, we'll extend the project to include the ability to add posts and save them to a file on the server.

Changes to the HTML Markup

We need to add three elements to the document body to effectuate the submission of new posts:

  • the frmPost form
  • the txaPostText TextArea
  • the btnPost submit button

Having access to the page's DOM on the server-side creates a bit of a dilemma with respect to document events. That is, should we declare them on the sever or the client-side? Since one of the goals of Jaxer is to facilitate the dynamic building of web pages on the server, Jaxer.setEvent() is a convenient way to assign such handlers, under those conditions. If we had a reason for appending the frmPost form to the document before serving it to the browser, we could set the form action there using Jaxer.setEvent("onsubmit", $("frmPost"), onSubmitHandlerFunction);. However, being a fairly static page component, it's probably a better choice to simply add the setFormAction() call to the body's onload event.

The Form onsubmit() Event

Just a short time ago, it was standard practice to bind any event listeners directly to their target element within the opening tag. For instance, a form tag might look something like:

Nowadays, it's a lot less common to see a direct assigning of elements' events in the HTML markup. There are a few compelling reasons why this practice has fallen out of favor. One catalysts for the change was the Unobtrusive JavaScript movement. Part of their mandate is to separate the page's content from behavior. That includes the relocating of JS calls from the opening HTML tag to the JavaScript file. Organizing the code this way offers some additional advantages as well, such as giving the developer greater control over elements of the same type and facilitating operations on groups of elements. For example, the following JQuery Framework code assigns a date validation function to all input fields with a name of 'date':

The second very good reason to adopt an unobtrusive approach as in the code snippet above is that directly assigning a function to an event will completely wipe out any pre-existing handlers! The solution is to append new event handlers to the eventListener collection. In Mozilla, the function to do that is called addEventListener(); in Internet Explorer, it's called attachEvent(). Better still, is to use a JavaScript Library function like Prototype's Event.observe(). It works in all major browsers and does not clobber pre-existing event handlers.

Out of the unobtrusive JavaScript coding style has emerged the following pattern for assigning event handlers. An initializing function is assigned to the window's onload event which contains the code for attaching all the various listeners. That's the style we'll be using here:

[next]