Be the first to write a review
Free - "Edit-in-place" with Spry AJAX
AJAX "Edit-in-place" is a type of functionality which allows users to "edit" various portions of a web page directly in the browser. Clicking on a block of content turns it into an editable form field; clicking away turns it back into a "read-only" text block and saves the changes to the database.
In this short tutorial 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.
Adding Update Record Server Behavior
For this tutorial you need a blank web
document with a Recordset selecting a single record (based, for instance on a
record ID). Record Detail is the perfect example of such a page.
1. Click Record Update Form Wizard button
located on the Data tab of the Insert bar to run the Wizard.
In the Wizard dialog make sure to include fields for ALL table columns.
Clicking OK will insert the form with an HTML table containing all the fields.
Dreamweaver will also add the server-side code required for updating the
record.
2. Open Bindings panel (Ctrl+F10) and expand your Recordset by clicking "+" button. Select a Recordset field item in the expanded list, then "drag and drop" it inside the table cell with the corresponding form field.
For example, select and drag "News_Body" item into the cell with "News_Body" form
field.
Repeat for each Recordset field you want to be visible to the user.
Each Dynamic Text created this way will represent to the user the "read
only" view of a Recordset field.
3. Now each table cell has a Dynamic Text and a form field.
Select Dynamic Text in one of the cells and place it in a div tag: click Insert Div tag button located on the Common tab of the Insert bar. In the dialog make sure "Wrap around selection" is selected
in the Insert dropdown. Enter the ID parameter using the following
naming convention: name of the form field + "_div". For example if the form
field name is "News_Body" the div's ID will be "News_Body_div".
Repeat for every Dynamic Text representing "read only" view of a
Recordset field.
4. Add the following block of JavaScript inside the <head> tag of your page:
<script type="text/javascript">
<!--
function editField(what){
what.style.display="none";
document.getElementById(what.id.substring(0,what.id.indexOf("_div"))).style.display="inline";
document.getElementById(what.id.substring(0,what.id.indexOf("_div"))).focus();
}
function updateField(what){
document.getElementById(what.id+"_div").style.display="inline";
document.getElementById(what.id+"_div").innerHTML=what.value;
what.style.display="none";
what.form.submit();
}
//-->
</script>
The script contains two functions: editField() and updateField().
First one (editField()) will "make" the block of content "editable" (by hiding the Dynamic Text and showing the corresponding form field).
It will be triggered by user onclick event.
The second function (updateField()) will trigger form submission to update the record and reset the view.
This will occur when user clicks away from the form field.
5. Open Behaviors panel and to add "editField(this)"
(without quotes) to each "read only view" div tag making sure onclick event is selected in event handler dropdown.
6. After that add "updateField(this)" (without
quotes) to each form field making sure onblur event is selected in event
handler dropdown.
7. Define hiddenField CSS class with display property set to "none" and apply this class to every form field:
.hiddenField{
display: none;
}
If you test the page in the browser you will noticed that "editing" your block of content will submit the form (that's what we want) and refresh the page (not what we want!).
All we have to do is add Spry Server Action Object to execute the Update Record server code via AJAX.
Alex July
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.