With inline editing, you can quickly and easily allow users to edit sections of a web page, but hidden in those simple APIs is a lot of power and flexibility that you can advantage of - without too much work. Over the next couple of weeks we'll take a look at some of the things you can do with inline editing to create rich editing environments for your users.

First, lets look at how to create a web page with a rich content field that can be repeated multiple times. To get started, we'll use a form for an article that already has inline editing enabled on the abstract and body elements. Take a look at Implementing EditLive! Inline Editing for a description of how to get the basics of inline editing working. The page also has the styles described in Using CSS To Make Inline Editing More Intuitive to make the editable areas stand out.

You can download the completed page and follow along so you can see things in context. To keep the article short, I'll just focus on the key parts that make the repeating appendices work.

The first thing to do is add a section in the document for Appendices:

<div id="appendices">
<h2>Appendices</h2>
<p><button onclick="addAppendix();" id="addAppendix">Add Appendix</button></p>
</div>

The addAppendix function will do the actual work of adding an appendix by:

• Creating the DOM elements for the appendix section with a DIV for the content and a remove button.
• Adding the appendix into the document at the right place.
• Telling EditLive! to make the new DIV editable.

First, here's the code to create the appendix DOM structure and insert it into the document. It uses standard JavaScript and you could create this section any way you prefer. Make sure that the DIV containing the content has a unique ID so that we can refer to it later.

var nextAppendixId = 1;
function createAppendix() {
  var appendixId = "appendix" + nextAppendixId;
  nextAppendixId++;
  var wrapper = document.createElement("div");
  var appendix = document.createElement("div");
  // Make the DIV part of the editable class so it displays correctly
  // and part of the appendix class so that we can size it correctly via CSS.
  appendix.className = "editable appendix";
  appendix.id = appendixId;
  wrapper.appendChild(appendix);

  // Add a remove button.
  var remove = document.createElement("button");
  remove.onclick = removeAppendix;
  remove.appendChild(document.createTextNode("Remove"));
  wrapper.appendChild(remove);
  document.getElementById("appendices").insertBefore(wrapper,
      document.getElementById("addAppendix").parentNode);
  return appendixId;
}

Not that we set the onclick function for the remove button to removeAppendix, we'll take a look at that in a moment. Now that we've got the DOM structure we need to add it to the document. We also used an incrementing variable to generate unique IDs for every appendix we add.

Now we get to the EditLive! specific part - making the appendix content editable. The addEditableSection call is all we need, but we also add a call to onclick so that the editor immediately loads, ready for the user to enter content.

var appendixId = createAppendix();
editlive.addEditableSection(appendixId);
// Simulate a click so that the editor loads, ready for the user to enter content.
document.getElementById(appendixId).onclick();

At this point the user can add appendices and edit them, but the remove button doesn't work. The removeAppendix function is just simple JavaScript again - it just has to remove the appendix DOM structure we added:

function removeAppendix() {
  var appendixWrapper = this.parentNode;
  appendixWrapper.parentNode.removeChild(appendixWrapper);
}

So it turns out that the hardest part of repeating sections is doing the JavaScript work to create and remove the section - to make it editable you simply call the addEditableSection function and give it the ID of the new DIV. To see it all in context, take a look at the final page.

This entry is filed under Inline Editing. You can follow any responses to this entry through the Atom feed. You can leave a response, or trackback from your own site.