Rubyの勉強、はじめました。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


Rails Ajax サンプル

ゆっくりとだけど、Railsの勉強すすめてます。
Ajax on Railsてな記事を発見したので、
今日はちょっと寄り道して、Ajaxをごにょごにょしてみました。
簡略化した手順ですが、公開しておきます。

1.新規にRailsアプリ&コントローラ「Demo」を作成。
[~/work]$ rails ajax_demo
[~/work]$ cd ajax_demo
[~/work/ajax_demo]$ ruby script/generate controller Demo index

2.ビューを修正
app/views/demo/index.rhtml
<html>
  <head>
    <title>Ajax Demo</title>
    <%= javascript_include_tag "prototype" %>
  </head>
  <body>
    <h1>What time is it?</h1>
    <div id="time_div">
      I don't have the time, but
      <%= link_to_remote("click here",
        :update => "time_div",
        :url => { :action => :say_when },
        :position => "after") %>
      and I will look it up.
    </div>
  </body>
</html>
javascript_include_tag() は、Prototype JavaScriptライブラリをインクルードします。このライブラリは全てのRailsに含まれているものです。
link_to_remote() はその場所にシンプルなフォームを作成します。以下、引数の説明。
 1. 表示する文字列。この例では、"click here"。
 2. クリック後の実行結果と置き換わる内容を含むDOM要素のID。この例では、"time_div"。
 3. サーバーサイドでの動作を呼ぶURL。この例では、"say_when"を呼んでいる。
 4. クリック後の実行結果の出現場所を制御。省略すると、2番目の引数が置き換えられる。
 設定できる値は、top/bottom/after/before。

3.コントローラを修正
app/controller/demo_controller.rb
class DemoController < ApplicationController
  def index
  end
  
  def say_when
    render_text "<p>The time is <b>" + DateTime.now.to_s + "</b></p>"
  end
end


4.動作確認
[~/work/ajax_demo]$ ruby script/server
でWEBrickを動かして、localhost:3000/Demo にアクセス。

ajax_demo

"click here"をクリックする度に、画面遷移することなく、現在時刻が挿入されていきます。
ajax_demo_2


そんだけ。
スポンサーサイト


コメント

承認待ちコメント

このコメントは管理者の承認待ちです

  • 2010/03/02(火) 21:59:00 |
  • |
  • #
  • [ 編集]

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://zeero.blog60.fc2.com/tb.php/16-21ec345a
この記事にトラックバックする(FC2ブログユーザー)

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。