Monday, July 28, 2008

Building interactive web pages using AJAX and RJS

When we talk about interactive web applications, AJAX is one of the most important technologies. Rails provides an easy way to use Ajax in your web site through RJS. RJS helps you make and ajax request and have several page elements updated correspondingly.

Implementing Ajax requests using RJS is a simple matter of doing the following:

  • Include the requried javascript files.
  • Use the right rails tags to launch an ajax request.
  • Declare that your action in the controller can respond to rjs.
  • Define the rjs response (the changes to the DOM).

Any rails application has the javascript files (prototype.js, effects.js, dragdrop.js, controls.js, application.js) by default. All you need to do is to include them in your layout file by adding:

<%= javascript_include_tag :defaults %>

Rails provide 'remote' alternatives for its link and form tags

  • link_to_remote vs link_to
  • form_remote_for vs form_for and
  • form_remote_tag vs form_tag.

Using the remote alternative will cause the html tags generated to have a new AjaxRequest call;
so when u specify:

<%= link_to_remote "Some text", :url => {:action=>'action_name'}%>

This will cause the new anchor tag to have an onsubmit attribute with the required ajax call to the action.

You need also to declare that the controller method responds to ajax by adding the following part to it. (You can also add format.html of action can be called with a normal request)

respond_to do |format|
    format.js
end

Finally, define the changes in the DOM (reponse) in the a new .rjs file in the views directory

page.replace_html :element_id, 'new html replacement'
page.insert_html :bottom, :element_id2, 'new html element below the element_id2 element'
page.insert_html :top, :element_id3, :partial => 'partial_name' , :object=> @object

Ryan Bates provided a nice demonstration on how to make Ajax calls with rjs in his rails casts.

Sunday, July 20, 2008

Rich Text Editors for Radiant CMS 0.6.7

If you are creating a radiant project that will have content edited by non technical people, you'll probably need a rich text editor to be available in your website.

There are several Radiant extensions available for that purpose including TinyMCE, Wym Editor, and FckEditor.

Well, TinyMCE is a very nice text editor, but it seems it is not yet compatible with Radiant 0.6.7. I managed to installed it successfully following the installation instructions, I can see it listed among the extensions in the administration area, it is there among the filter when editing the page, but the toolbar simply doesn't show up.

FckEditor worked very smoothly with me. the Installation inctructions are simple and direct

RAILS_ROOT$ git clone git://github.com/djcp/radiant-fckeditor.git vendor/extensions/fckeditor
RAILS_ROOT$ rake radiant:extensions:fckeditor:update

Fck Editor started just fine after installation and working very smoothly with the new radiant version.

As for Wym Editor, i believe the installation instructions should have been more clear. it should be as follow:

RAILS_ROOT$ git clone git://github.com/jomz/wymeditor-for-radiant.git vendor/extensions/wym_editor_filter
RAILS_ROOT$ rake radiant:extensions:wym_editor_filter:install

The first git clone command wasn't listed in the readme file. when i cloned the repository it was downloaded the name wymeditor-for-radiant it took me sometimes to realize the mistake i have made by having the extension directory with an invalid name. However, i fixed my mistake and had it prepared.Then i faced another issue. the editor interface is not having the default english language.Digging shortly i realized it is loading the strings from the nl.js file which has danish language or something, insteal of loading en.js. I'm not sure yet if it was an installation problem or a bug on their side. Fck Editor was more prettier for my application so i didn't spent a lot investigating here.

Tuesday, July 01, 2008

Traffic Jam Parking Game

There are many flash games online. I liked this one a lot.
The idea is simple, move the cars around and unblock your path home to your caring wife.



enjoy it