November 9, 2007 at 0:14 , Tags:
Ajax,
JavaScript,
Rails,
Ruby
Rails を使うと Ajax がとっても簡単ですよ、というお話。
普通のリンク
例えば、以下のコードを Rails の MVC パターンにおける View の部分に相当する *.rhtml ファイルに書きます。
<%= link_to "link to hoge", :action => 'hoge' %>
すると以下の HTML が出力されます。
<a href="/chapter3/hoge">link to hoge</a>
これだけでもまあ便利です。
Ajax 版のリンク - 1
Ajax 版のリンクを作ってみましょう。
そのためには上のコードを少し変えるだけです。
以下のように link_to のところを link_to_remote に変えて、後ろの :action のところも少し変えます。
<%= link_to_remote 'link to hoge', :url => { :action => 'hoge' } %>
出力される HTML(と JavaScript)は以下のようになります。
<a href="#" onclick="new Ajax.Request('/chapter3/hoge', {asynchronous:true, evalScripts:true}); return false;">link to hoge</a>
「Ajax.Request…」とかそれっぽいコードが生成されているのがわかりますね。
Ajax 版のリンク - 2
上の例だとリンクをクリックしても(リクエストは送信されるけど画面上は)何も変化がないのでちょっとさみしいですよね。
例えば以下のようにすれば、レスポンスの内容を画面に挿入することができます。
<%= link_to_remote 'link to hoge',
:update => 'content',
:url => { :action => 'hoge' } %>
<div id="content"><div>
出力される HTML(と JavaScript)は以下ようになります。
<a href="#" onclick="new Ajax.Updater('content', '/chapter3/hoge', {asynchronous:true, evalScripts:true}); return false;">link to hoge</a>
これで胸を張って Ajax と言えますね。
めでたしめでたし。
参考: