In this article we will talk about creating "editable Spry Table" functionality where user can double-click directly inside a table cell and edit it just like an Excel spreadsheet. Clicking away will return the cell back to the "read-only" state and save the change to the database. In other words the change will be saved as soon as it has been made. You will learn how to build this functionality in Dreamweaver using standard Update Record Server Behavior and Spry Server Action object from Spry Data Utilities Toolkit.
Click Spry Server Action icon located on the Spry tab of the insert panel.
In the dialog select your update form from the Form dropdown, the Display progress indicator (if you are using one) and the name of your Spry Data set from the Refresh Spry data set dropdown to reload your Spry Table if you want your data to be fresh (for example if your Spry Table is sorted by the value in the edited column).
Click OK to insert the object.
Test your page now and you will notice that the refresh is
gone. Definitely a progress, but let's not stop at that!
We can now safely hide the form from the user.
Click the "+" button at the bottom of the CSS Styles panel to add a new declaration.
From the Selector Type dropdown pick "ID (applies to only one HTML element)"
and from the Rule Definition "(This document only)".
Click "OK" and switch to the Block tab in the pop-up dialog. Select "none"
from the Display dropdown. Your form will now be hidden.
1.First of all we need to make sure that even if a cell in your
table contains no data it can still be clicked on and edited. To achieve that
we need to wrap the content of every cell you want to be editable inside a
<div> tag. Go ahead and select the content of the first cell, then click Insert
DIV tag button on the Layout tab
of the Insert bar.
In the dialog that will pop-up make sure "Wrap around selection" option is
selected and enter "editable_field" in the Class menu.
Click New CSS Rule button to open the dialog for defining
CSS properties for the class.
Click "OK" and enter 100% for the Width and 12px (or whatever your want the
height of your cell to be) for the Height and click "OK" again:
Add the following block of JavaScript inside the <head> tag of your page:
<script type="text/javascript">
<!--
function editField(what){
what.contentEditable=true;
}
function updateField(what,fld){
what.contentEditable=false;
field=eval("document.updateForm."+fld);
if(document.all){
new_value=what.innerText;
}else{
new_value=what.textContent;
}
//Update ONLY if the new value is different from
the old one
if(new_value!=field.value){
field.value=new_value;
document.updateForm.submit();
}
}
//-->
</script>
Notice that "updateForm" in this script is the name of your update form
- change it to your own value if needed.
The script contains two functions: editField() and updateField().
First one (editField()) will make the cell
editable and will be triggered by user's onclick event.
The second function (updateField()) will set the value of
the corresponding field inside our hidden update form to the text of the cell
and trigger the form submission to update the record and reset the view. This
will occur when user clicks away from the cell and ONLY if the new value
is deferent from the old one.
Now select each "editable_field" div tag and use Behaviors panel
and to add "editField(this)" (without quotes) to each div tag
making sure onclick event is selected in event handler
dropdown.
Behaviors panel in Dreamweaver CS3
2.After
that repeat the procedure and add "updateField(this,' field_name')"
(without quotes) to each of the div tags making sure onblur event
is selected in event handler dropdown. Instead of the field_name enter
the name of the corresponding update form field. Notice the single quotes
surrounding the field's name:
Behaviors panel in Dreamweaver CS4 and CS5
Alex July is a Vancouver-based (Canada, British Columbia) Web Developer/ Graphic Artist who has an extensive experience in both creative realms.
He is also a host of Linecraft.com where he is showcasing his skills and sharing experience with the developers community. For the past 3 years Alex has been focusing on the development of Rich Internet Applications using Macromedia Flash technology.
When away from the computer Alex is practicing Martial Arts, playing guitar and enjoying time with his wonderful family.
You must me logged in to write a review.