P. 1
Edit In Place Spry Ajax 1

Edit In Place Spry Ajax 1

|Views: 13|Likes:
Published by ruellapiz

More info:

Published by: ruellapiz on Aug 09, 2010
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less





“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

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

getElementById(what.com All Rights Reserved To get more go to DMXzone. document.com Page 3 of 4 .display=“none”. This will occur when user clicks away from the form field. 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). After that add “updateField(this)” (without quotes) to each form field making sure onblur event is selected in event handler dropdown. } 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.style. 7. The second function (updateField()) will trigger form submission to update the record and reset the view.id+”_div”).hiddenField{ display: none.value.id+”_div”).“Edit-in-place” with Spry AJAX Alex July } //--> </script> document. Copyright © 2008 DMXzone.form. Define hiddenField CSS class with display property set to “none” and apply this class to every form field: .innerHTML=what. It will be triggered by user onclick event. what.display=“inline”.style. 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. what. 6.getElementById(what.submit().

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 Page 4 of 4 . In the dialog select your “update” form from the Form dropdown. Click OK to insert the object. Copyright © 2008 DMXzone.com All Rights Reserved To get more go to DMXzone.“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.

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->