Comments on: enter the world of AJAX - solving problems with saving records http://www.selfadhesivelabels.com/blog/2007/03/16/enter-the-world-of-ajax-solving-problems-with-saving-records/ Describing our migration to open source software and UK business issues in label printing. Wed, 20 Aug 2008 21:37:53 +0000 http://wordpress.org/?v=2.5.1 By: Michael http://www.selfadhesivelabels.com/blog/2007/03/16/enter-the-world-of-ajax-solving-problems-with-saving-records/#comment-30 Michael Mon, 19 Mar 2007 01:09:56 +0000 http://www.selfadhesivelabels.com/blog/2007/03/16/enter-the-world-of-ajax-solving-problems-with-saving-records/#comment-30 Hm, I wasn't expecting your blog software to allow HTML, so my example code isn't displayed correctly. Let's try again: <%= link_to_remote("[Edit]", :update => "address_div", :url => { :controller=>'common/address', :action => :address_editor, :id=>address.id }) %> That one line of code produces, as output, an HTML anchor tag with a javascript event that performs an AJAX call back to the server, retrieves an HTML fragment, and uses it to replace the innerHTML of a div with the id "address_div". Hm, I wasn’t expecting your blog software to allow HTML, so my example code isn’t displayed correctly.

Let’s try again:

<%= link_to_remote(”[Edit]“, :update => “address_div”, :url => { :controller=>’common/address’, :action => :address_editor, :id=>address.id }) %>

That one line of code produces, as output, an HTML anchor tag with a javascript event that performs an AJAX call back to the server, retrieves an HTML fragment, and uses it to replace the innerHTML of a div with the id “address_div”.

]]> By: Michael http://www.selfadhesivelabels.com/blog/2007/03/16/enter-the-world-of-ajax-solving-problems-with-saving-records/#comment-29 Michael Mon, 19 Mar 2007 01:03:43 +0000 http://www.selfadhesivelabels.com/blog/2007/03/16/enter-the-world-of-ajax-solving-problems-with-saving-records/#comment-29 Ruby on Rails has built-in support for this sort of thing, with an "in-place field editor" and other support for AJAX. When using the in-place field editor, users simply click the item they want to edit, and it is replaced with an input field. When they click "save" (or press the return/enter key), it is automatically saved server-side. That works well for turning a "view" screen into an "edit" screen quickly and intuitively. The downside is that it allows only single fields to be edited at a time, and doesn't have a solution for tabbing among various input controls. There's other ways to do it though. For example, to can use the "link_to_remote" helper to create a link that causes a portion of the page to be replaced with new content from the server -- an edit form, for example. When the form is saved, it is replaced again with new content from the server -- the updated "view" containing the information entered by the user. You can add an effect (such as the "yellow fade effect" easily to highlight to the user that the content has been saved. Many of the effects and AJAX features of the Ruby on Rails environment are supplied by the Javascript libraries Prototype and Scriptaculous. They are extremely easy to use from Ruby on Rails, which has support for generating Javascript using Ruby code, and a variety of "helpers" like link_to_remote. For example, the following line of code from a Rails app displays a link (<a href="" rel="nofollow">[Edit]</a>) that, when clicked, causes a div displaying an address to have its content (innerHTML) replaced with a full address editor form fetched from the server. div_id, :url => { :controller=>'common/address', :action => :address_editor, :id=>address.id }) %> Easy. Ruby on Rails has built-in support for this sort of thing, with an “in-place field editor” and other support for AJAX. When using the in-place field editor, users simply click the item they want to edit, and it is replaced with an input field. When they click “save” (or press the return/enter key), it is automatically saved server-side. That works well for turning a “view” screen into an “edit” screen quickly and intuitively. The downside is that it allows only single fields to be edited at a time, and doesn’t have a solution for tabbing among various input controls. There’s other ways to do it though. For example, to can use the “link_to_remote” helper to create a link that causes a portion of the page to be replaced with new content from the server — an edit form, for example. When the form is saved, it is replaced again with new content from the server — the updated “view” containing the information entered by the user. You can add an effect (such as the “yellow fade effect” easily to highlight to the user that the content has been saved.

Many of the effects and AJAX features of the Ruby on Rails environment are supplied by the Javascript libraries Prototype and Scriptaculous. They are extremely easy to use from Ruby on Rails, which has support for generating Javascript using Ruby code, and a variety of “helpers” like link_to_remote.

For example, the following line of code from a Rails app displays a link ([Edit]) that, when clicked, causes a div displaying an address to have its content (innerHTML) replaced with a full address editor form fetched from the server.

div_id, :url => { :controller=>’common/address’, :action => :address_editor, :id=>address.id }) %>

Easy.

]]>