“Edit-in-place” with Spry AJAX

Alex July

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.

Copyright © 2008 DMXzone.com All Rights Reserved To get more go to DMXzone.com

Page 1 of 4

id.displ ay=“inline”. document.focus().indexOf(“_div”))).id.style. Repeat for every Dynamic Text representing “read only” view of a Recordset field. 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”. Now each table cell has a Dynamic Text and a form field. 3. Open Bindings panel (Ctrl+F10) and expand your Recordset by clicking “+” button. document.indexOf(“_div”))).com All Rights Reserved To get more go to DMXzone.substring(0.getElementById(what.display=“none”. In the dialog make sure “Wrap around selection” is selected in the Insert dropdown. } function updateField(what){ Copyright © 2008 DMXzone.com Page 2 of 4 . select and drag “News_Body” item into the cell with “News_Body” form field. 4. 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.“Edit-in-place” with Spry AJAX Alex July 2. Repeat for each Recordset field you want to be visible to the user.what.substring(0. Each Dynamic Text created this way will represent to the user the “read only” view of a Recordset field.style.what. Add the following block of JavaScript inside the <head> tag of your page: <script type=“text/javascript”> <!-function editField(what){ what. For example.getElementById(what. then “drag and drop” it inside the table cell with the corresponding form field.id. Select a Recordset field item in the expanded list.id.

display=“inline”. 5.style.getElementById(what. All we have to do is add Spry Server Action Object to execute the Update Record server code via AJAX.form. Define hiddenField CSS class with display property set to “none” and apply this class to every form field: .getElementById(what.id+”_div”). 7.hiddenField{ display: none. The script contains two functions: editField() and updateField(). Copyright © 2008 DMXzone.id+”_div”). It will be triggered by user onclick event.innerHTML=what.“Edit-in-place” with Spry AJAX Alex July } //--> </script> document. This will occur when user clicks away from the form field.display=“none”. 6.com All Rights Reserved To get more go to DMXzone. document.com Page 3 of 4 . The second function (updateField()) will trigger form submission to update the record and reset the view.style. 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. After that add “updateField(this)” (without quotes) to each form field making sure onblur event is selected in event handler dropdown.value. First one (editField()) will “make” the block of content “editable” (by hiding the Dynamic Text and showing the corresponding form field). } 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!).submit(). what. what.

“Edit-in-place” with Spry AJAX Alex July Adding Spry Server Action Click Spry Server Action icon located on the Spry tab of the insert panel. Copyright © 2008 DMXzone. Click OK to insert the object. Conclusion That’s all! You can test your page in the browser (don’t forget to update SpryAssets folder on your server with the added files).com All Rights Reserved To get more go to DMXzone. In the dialog select your “update” form from the Form dropdown.com Page 4 of 4 .

Sign up to vote on this title
UsefulNot useful