Create a File-based Blog using Jaxer | 2 | WebReference

Create a File-based Blog using Jaxer | 2


[prev]

Create a File-based Blog using Jaxer [con't]

Here's our window.onload event handler, which sets the handler for the form.onsubmit event. Notice that it's an ideal place to use anonymous functions, because once a listener is in place, we do not need to reference it again:

The form's onsubmit handler verifies that the txaPostText field contains a value and then calls the server-side save() function. Upon a successful save, the new post is appended to the bottom of the list, and the textarea is cleared. In the event of an error, an alert box informs the user. Finally, the event is cancelled using Prototype's event.stop() function, and the focus is reset on the txaPostText field. We could have dispensed with the form and assigned our function to the button's onclick event instead, as the form contents are in fact never submitted to the server. Before the advent of Ajax, using a form and submit button was really the only way to transmit them. By convention, it is still common practice to enclose input elements within form tags and to use a submit button to send form contents. It's also a good head start, should we decided to include additional information at a later time. Most JavaScript Libraries provide excellent helper functions for converting a form's elements into a collection that can easily be passed to the server via Ajax calls.

Revamping the init() Function

The event listener pattern that we saw above can just as easily be applied to the server-side init() function. Although it is also appended to the window object, it needs to be separate from the other, client-side handlers. Don't forget to remove the onserverload="init()" from the <BODY> tag. Here's what it the init() function should look like now:

Be sure to change the JS libraries' runat attributes to 'both', as the save() function references both of them.

 

In the event of an error, it is written to the log. With regards to the log, it's best to preview your web pages with the log viewer running from time to time, as server-side errors are not reported by the browser like traditional JavaScript errors are. To see them, you need to open the Jaxer Log Viewer by selecting the Jaxer Server on the Servers tab, and clicking the Open Log button.

Figure 1

Figure 2

Here is the blog.html page with today's changes and additions.

We'll be looking more at server errors next time, as we explore script debugging using Aptana. Later, we'll extend the project to add a page where posts are re-ordered and/or renamed, and move to using a database instead of text files.


Rob Gravelle combined his love of programming and music to become a software guru and accomplished guitar player. He created systems that are used by Canada Border Services, CSIS and other Intelligence-related organizations. As a software consultant, Rob has developed Web applications for many businesses and recently created a MooTools version of PHPFreechat for ViziMetrics. Musically, Rob recently embarked on a solo music career, after playing with Ivory Knight since 2000. That band was rated as one Canada's top bands by Brave Words magazine (issue #92) and released two CDs. Rob's latest, entitled KNIGHTFALL, was a collaboration between himself, the former Ivory Knight vocalist, and legendary guitarist/producer, Jeff Waters of Annihilator fame. Rob is available for short-term software projects and recording session work. to inquire, but note that, due to the volume of emails received, he cannot respond to every email. Potential jobs and praise receive highest priority!

Original: August 7, 2009


[prev]