Ajaxについて

Ajaxの例

  • 実際に簡単なAjaxの例を提示していく。

必要なファイル

  • app/controller/[任意のコントローラ].rb
  • app/view/[任意のコントローラ]/[Ajax実行ビュー].html.erb
  • app/view/[任意のコントローラ]/_[部分テンプレート].html.erb
  • app/view/[任意のコントローラ]/[メソッド名].js.erb

ココの例題で使うファイル

  • app/controller/ajax.rb
  • app/view/ajax/index.html.erb
  • app/view/ajax/_insert.html.erb
  • app/view/ajax/add.js.erb

Ajaxを実行するビューを編集

  • 編集ファイル:app/view/ajax/index.html.erb
  • 追加ボタンをクリックするとdivタグajax_areaが変化する。

<h1><%= page_count %></h1>

<%= button_to "追加",{:action=>:add}, :remote=>true %> 

<div id="ajax_area">
  <%= render :partial=>'insert', :object=>@ajax_count %>
</div>

任意のコントローラにAjaxで実行したいメソッドを追加

  • 編集ファイル:app/controller/ajax.rb

@page_count = 0
@ajax_count = 0

def index
  @page_count += 1
  @ajax_count += 1
end

def add
  @ajax_count += 1
end

追加したメソッドに対応するjs.erbの作成

  • 編集ファイル:app/view/ajax/add.js.erb

$("#ajax_area").html(
  "<%= escape_javascript(render :partial=>'insert', :object=>@ajax_count) %>"
);
  • $("#ajax_area")に結果を表示する場所を指定。この場合はid="ajax_area"の場所。
  • :partialにdivタグajax_areaに表示したい部分テンプレートを指定
  • :objectに部分テンプレートに渡したいインスタンス変数を指定

部分テンプレートの作成

  • 編集ファイル:app/view/ajax/_insert.html.erb

<h1><%= @ajax_count %></h1>


  • 最終更新:2010-11-30 11:36:02

このWIKIを編集するにはパスワード入力が必要です

認証パスワード