Rails3/Ajax の履歴(No.1)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Rails3/Ajax へ行く。
  • 1 (2013-06-04 (火) 04:50:46)

Tag: Rails3/Ajax

目次†

参考情報†

基本†

• 複数のファイルが連携するので直感的に分かりづらい。
• ビューの*.html.erbからajaxでコントローラー呼び出し→remote=true→コントローラーで処理→*.js.erb実行という流れになる。最後の*.js.erb実行時にhtmlを組み立てる必要がある場合、部品を部分テンプレートとして外出しにしてくのが基本パターン。

Ajaxで時刻を書き換える†

index.html.erb。リンククリックで現在時刻のdivの内容を書き換える。簡単なので部分テンプレートなし。†

<div id='result'>現在時刻: <%= Time.now %></div>
<%= link_to '更新', {:action => 'upanel'}, :remote=>true %>

ajax_controller.rb†

• @timeに現在時刻を設定。

    def upanel
      @time = Time.now.to_s
    end
  

upanel.js.erb†

• jQueryを使って(Rails3の場合デフォルト有効)、resultを書き換えている(index.html.erbのdivタグ)。

  $('#result').html(
    "<%= escape_javascript('現在時刻: ' + @time) %>"
  );