Simple ToDo Lists With Prototype

At the moment I'm doing such heavy JavaScript-based development that I've set one of these Prototype "wallcharts" as my desktop background. It's amazing how much easier Prototype can make JS intensive development.

Time for an overly-simple example. Here's a to-do list form. Enter the todo item and press enter to add it to the numered list. Click the cross to remove any item.


    How hard would you imagine it to be to write that from scratch in JavaScript? Not that hard but cumbersome and time consuming. Well, now consider the following line of code:

    new Insertion.Bottom("todo_list", "<li>"+$F('todo')+"</li>");

    This adds an <li> element to the <li> called "todo_list". The text in the item comes from the field called "todo". If you look at the source you'll see there's a little more to it than that, but you get the idea. Time permitting I plan to create a Web 2.0-style Domino database that shows a whole host of Ajax and DHTML magic at play. It's amazing what you can do in the browser now and Prototype/Scriptaculous makes it really easy.

    Note that the example form actually adds a hidden field to each LI element with the same name in each case and the value set to the same as the todo item. If this form were then submitted to Domino and a multi-value field existed with this same name the todo list would get stored. Like this.

    If you're doing any kind of on-the-fly DOM manipulation then you're going to need something like Firebug. One of its great features is that allows you to view/inspect the source of the page as it stands, rather than as the server delivered it, which is all a typical view source does. The same is true of the IE Developer Toolbar.


      • avatar
      • Joche
      • Thu 15 Jun 2006 10:18 AM

      Yes, prototype is very useful. However, is it the framework we should go with when IBM & CO (almost everyone except MS) is collaborating with other frameworks, for example DOJO. In the Open Ajax Foundation project?

      • avatar
      • Jake Howlett
      • Thu 15 Jun 2006 10:25 AM

      Hi Joche.

      Which framework to go with is probably a matter of choice. I like protaculous (rebrand maybe? you heard it here first) as it's small and easy to use with lots of benefits.

      PS: I add your site to my RSS feedreader this morning ;o)

      • avatar
      • Peter
      • Thu 15 Jun 2006 12:01 PM

      A great example Jake, thanks for sharing all of your knowledge. I love the ajax name picker, I see the demo, previous web based nab lookup solutions are cludgy at best. Is the demo nsf is available for download?

      • avatar
      • Rob
      • Thu 15 Jun 2006 02:18 PM

      The problem I have with prototype.js is the $F() function does not read the values of checkboxes or radio buttons.

      • avatar
      • Jake Howlett
      • Thu 15 Jun 2006 03:04 PM

      Peter. It's not quite ready for release yet, but, drop me a line and I'll send a copy over.

      Rob. An oddity isn't it!? Look at my validation code from the other week if you want code to get values from any field type.

      • avatar
      • Rob
      • Sat 17 Jun 2006 12:19 PM

      @Jake, I saw your validation code and have written similar code myself. I'm just disapointed that they didn't finish prototype.js to include reading these types of fields.

      For example, a set of check boxes is essencialy the same functionality as a multi-value selection type control. prototype.js does handle the multi-value selection type, if I remember correctly. So if I switch my page design from one to the other, a properly designed library framework shouldn't have to be rewritten.

      With prototype.js I have to, at the very least, chance the code that reads these values. If I have to do that, I might as well do the whole job and make my own framwork for returning field values.


    Your Comments


    About This Page

    Written by Jake Howlett on Thu 15 Jun 2006

    Share This Page

    # ( ) '


    The most recent comments added:

    Skip to the comments or add your own.

    You can subscribe to an individual RSS feed of comments on this entry.

    Let's Get Social

    About This Website

    CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

    Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

    You can find me on Twitter and on Linked In.

    Read more about this site »


    Here are the external links posted on the same day.

    More links are available in the archive »

    More Content