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

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

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

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

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)//-->