I have come up with a technique to allow the user to edit content “Inline”.

Lets look at an example. I have a table of data, and the user needs to be able to edit the “Description” Field. Rather than take the user away from this ui view, I wish to enable “Inline Editing” like many powerful applications are offering these days.

The first step is to assign functions to the correct fields and capture the users input events. The user would click on the field to select it, so lets set up a doc delegate event to capture a click on the description field. We need to use doc delegate because the data is dynamic and so isn’t  in the DOM when the events handlers are normally assigned. Read my post about JQuery Document Delegate to catch up on this technique. I am going to delegate the capture of a click event on any table row <tr> with a class of “editBannerDescription”

$("#bannerslist").on("click", ".editBannerDescription", function(e){
var thedata=$(this).html();
alert(thedata);
 });

Yeah boyeee we have captured a click event for any element in the bannerslist table, and have access to the content that is in the table cell.

The next step is to alter the ui view so the user can edit the contents of the description table cell. I use a JQuery / JavaScript function to accomplish this:

enableEditDescription(object, bannernid){
     console.log("Message from enable Edit Description function: lets 
enable to edit the description of slide id:"+bannernid+" from
description of : "+$("#"+object).html()); }

I will continue to modify the enableEditDescription function to alter the ui view when the user clicks. I will grab the content from the cell, and replace the content with a text area whose value is the text that was in the cell.

The final code looks like this:

$("#bannerslist").on("click", ".editBannerDescription" , function(e){
var thedata=$(this).html();
var object=$(this).attr("id");
var getbannernid = object.match(/d+$/);
if(getbannernid){
    bannernid=parseInt(getbannernid[0], 10);
    console.log("Message from banner admin inc, here in doc delegate for 
     editBannerDescription with content of :"+thedata+" in cell 
     object id: "+object+" for banner nid: "+bannernid);
     enableEditDescription(object, bannernid);}
else{ alert('error getting id');}
 }); // end #bannerslist doc delegate actions

Now, when the user clicks a table cell with editable content, the cell changes into an inline editor.

The user needs to be able to “escape out” of the edit mode, discarding any changes that were made in the field.

Lets start with capturing the escape key press event when the user is in an editing field. We’ll use the good ol doc  delegate to capture this as so…

$("body").on("keydown", "textarea, input", function(e){
if(e.keyCode==27){
console.log("We have key press of escape key, on event target " + e.target.id + 
" lets exit edit mode without saving changes. Lets decide what place they're editing...");}
}); // end on keydown event handler

Now I can put back the original content of the cell and the user will have “escaped out” of edit mode.

The next step is going to be really fun. We are going to capture the press of the “Edit” button and save the new content into our cms.

So, to use my plugin to any form or content,

Separate content chunks:
Wrap the content in div containers with unique ids begining with “step_xxx”  where xxx should be a detailed way to identify the content such as “step_intro” and  “step_personal_info”

If the path is non branching, the plugin will create buttons for “back” and “next” named “stepDownButton” and “stepUpButton” . It will look for the second to last step and put a submit, and the last step is the confirmation. To create a custom path, branch, or skip a step, just create a button named “stepDownButton” and “stepUpButton” . Give the button an onclick of stepUp(‘stepname’) or stepDown(‘stepname’) to make the button skip to a certain step.

Table of contents
The plugin will use the first element inside the step as description for the table of contents. You can use the attribute stepdesc on the step_xxx element as a custom title for the toc. The toc will be appended to the first step unless you make a custom toc using a container with id of “tableofcontents”. This can be disabled by …..

Form elements and Validation
To provide “empty field” validation to form elements in a step, just add the class “required” to the element. Place the class “email” to validate an email address on one input element. You can add class “match” to two elements in a step and they will have to match each other. Give the elements a unique ID and a good name attribute, and the plugin will create placeholders for the text input elements from the name.
NOTE: it seems like the name attribute is the perfect place to put a readable descriptive title that could be used in creating the labels, and for  summary display. NOTE: it seems like moving to the new html5 text inputs for validation such as email tel, then if input type = email, wouldn’t need a class selector.Just a thought for moving forward with

Data summary
In the second to last step, the plugin will set the the “NEXT” button onclick to stepUp(‘submit’);  The plugin will add a summary of the data the user entered so they may go back and make any changes. You may choose a custom display of the summary by putting an element with id “formsummaryarea” into this step. The plugin will omit any empty or hidden fields from the summary, and you can put class “nosummary” to omit any other items from the summary.

Submit and final confirm
In the final step, you should place your  final confirmation text there. This will tell the user the results of their data submit, success or error.  When user is ready, the script will submit the form data, and move to the final confirmation.

 

 

Themeing the elements

To theme the elements, just add classes to items in the ui view using jquery :

This will add a Panel effect to the divs—
$(‘div[id^=”step_”]’).addClass(“softblackgradient blackbottomrightboxshadow mediumallaroundpadding”);

The buttons wont work to style this way cause they aren’t in dom yet. To theme the buttons, you need to  set these global variables before you call to include the plugin.:

I feel that the “Begin”  button should look very different from the Next and Back buttons:
beginbuttonclass = “button roundedcorners success mediumallaroundpadding”

Here is to style the step up and step down buttons:
stepupbuttonclass=”button oval success smallallaroundpadding”
stepdownbuttonclass=”button oval alert smallallaroundpadding”

The “Submit” button needs to also look very different from the step up and down buttons.
style it like this: submitbuttonclass=”button roundedcorners mediumallaroundpadding success”

 

If you have put in custom buttons to go to non linear paths, make sure to still give the the names of stepUpButton and stepDownButton. Then you can select and style them as well using the jquery selector.

Theres tableofcontents to layout the toc, and  highlightstep to control the highlighted step. This is proving very difficult to get out of the plugin, since the toc relies on the scripts. There are classes yellowhighlight, and  mediumtext that will need to be declared in the ui view that is using the plugin.