Tagging content using Scriptaculous

Script.aculo.us
Jul
29

In-place-editing is a way of being able to click on an element and have it change into a form on the fly with the ability to save your changes there and then. It has many common applications in Web 2.0 style applications, and this guide shows you how to use them for tagging content.

Content is no longer strictly categorised in a tree-like structure of categories, usually it is now tagged instead. Tagging is basically a system where a piece of content is categorised with the keywords given to it.

A tag is a (relevant) keyword or term associated with or assigned to a piece of information (like picture, article, or video clip), thus describing the item and enabling keyword-based classification of information it is applied to.

It is generally accepted that tagging is a good way of categorising content, and most sites will let you tag content by providing a single text input for doing so, but some sites such as flickr provides a far superior solution in terms of visual representation. It's not actually that hard to create the same effect; if you happen to already be using the Scriptaculous javascript library then even better!

The first thing to do is to make sure you have added the scriptaculous include code to your script so that we can use the "In place editing code". Once you've done that, it's time to create some markup. Nwo, we want the markup to be semantically correct, and what we're adding is a list of tags, so the markup should be in the form of a list (as follows).

<ul id="taglist">
  <li id="tags1">Add a tag</li>
</ul>

So at present there is only 1 tag, and it's not a real tag, it's a prompt to tell the user they can add a tag. The next step is to add code to enable In-place editing on that list item. The following code should then be placed in either an included Javascript file, or inside a script element inside the header.

window.onload = function() {
  addTag(1);
};

function addTag(tagname) {
  new Ajax.InPlaceEditor('tags' + tagname, 'saveTag.php', {
    okButton:false,
    cancelLink: false,
    clickToEditText: "Click to add a tag",
    submitOnBlur: true,
    highlightcolor: "#C0D6E2",
    onComplete: function () {
      if($('tags' + tagname).innerHTML == "") {
      // No content so remove tag
        Element.remove('tags'  +tagname);
      }
      if(!$('tags' + (tagname + 1))) {
        // Insert new field for adding another tag
        new Insertion.After($('tags'+tagname), '<li id="tags'+(tagname+1)+'">Add a tag<\/li>');
        addTag(tagname+1);
      }
    },
    onFailure: function () {
      alert("Error: Could not apply the tag at this time, please try again at a later time.");
    }
  });
}

There's a fair bit of code there for something that I said was fairly simple, but most of it is just optional parameters for the Ajax.InPlaceEditor function. When the window first loads it will call the function, then this funciton will take the "tags1" element and make it in-place editable, posting any changes to saveTag.php. The options are then used to say that there shouldn't be an OK button or a cancel link displayed for posting, and that it will submit the changes when the element loses focus. When the call to the PHP script is complete it will then check the contents that were entered into the tag, if it was nothing then it will remove it, otherwise it will create a new editable element. Upon failing to save it will instead alert the user with an alertbox. Now you should have a working system for tagging (except the backend script for saving)! More details on what options are available for the inplace editor can be found in the Scriptaculous Wiki.

Also available in the examples section is a simple demo where you can add tags, and as you do they appear in a text input - simple!

your comments - Post a comment

blog comments powered by Disqus