感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

RailsでJavaScriptを使ってみる。レコードの更新と削除を行う。

<スポンサーリンク>

RailsでJavaScriptを新しく作りたいときは、「/myapp/app/assets/javascripts」のように、assets/javascripts以下にhogehoge.jsという新しいjsファイルを作ります。
ここにJavaScriptファイルを作れば、自動的に読み込まれる仕組みになっているようです(以下のページ参照)
http://qa.atmarkit.co.jp/q/3037

「/myapp/app/assets/javascripts」以下に、
bloggers.jsを用意します。

function doDelete(id) {
  if (confirm("レコードを削除しますか?")) {
    location.href = "/bloggers/delete?id=" + id
  }
}

こうやって用意しておくと、普通にviewを作ったときに、勝手に読み込まれます。
なぜ全部読み込まれるかというと、Rails3.1以降は、
「/myapp/app/assets/javascripts」以下に、「application.js」というファイルがあって、こいつはマニフェストファイルと呼ばれているんだけど、デフォルトではすべてのファイルを読み込むように書かれているからです。

ファイルの中にこんな文言があります。

This is a manifest file that'll be compiled into application.js, which will include all the files

こんな風に書かれているのは、カレントディレクトリ配下のファイル,jquery.js,jqueyr_ujs.jsをインクルードするという設定です「。

//= require jquery
//= require jquery_ujs
//= require_tree .

さて、JavaScriptを作ったら、次にviewのコードを見てみます。

<table>
<tr>
  <th>ID</th>
  <th>NAME</th>
  <th>PV</th>
  <th>URL</th>
</tr>
<% @datas.each do |data| %>
<tr>
  <td><a href="/bloggers/show?id=<%=data.id %>"><%= data.id %></a></td>
  <td><%= data.name %></td>
  <td><%= data.pv %></td>
  <td><%= data.url %></td>
  <td><a href="javascript:void(0);"
    onclick="doDelete(<%= data.id %>);">
    Delete</a></td>
  <td><a href="/bloggers/update?id=<%= data.id %>">
    Update</a></td>
</tr>
<% end %>
</table>

Deleteのところをクリックすると、doDeleteというJavaScriptの関数が呼ばれます。
Updateはリンクですね。

ちなみに、update.html.erbはこんな感じです。
更新用のフォームですね。

<table>
  <form method="post" action="/bloggers/update">
  <tr><th>ID</th><td><%= @result.id %></td></tr>
  <input type="hidden" name="id" value="<%= @result.id %>">
  <tr><th>Name</th><td><input type="text" name="name" value="<%= @result.name %>"></td></tr>
  <tr><th>PV</th><td><input type="text" name="pv" value="<%= @result.pv %>"</td></tr>
  <tr><th>URL</th><td><input type="text" name="url" value="<%= @result.url %>"</td></tr>
  <tr><th></th><td><input type="submit" value="送信"></td></tr>
  </form>
</table>
<hr/>
<a href="/bloggers/index> << index </a>

で、削除(delete)と更新(update)を行うコントローラーのメソッドは以下のように書く。

bloggers_controller.rb

  def delete
    obj = Blogger.find(params[:id])
    obj.destroy
    redirect_to :action => "index"
  end
  
  def update
    @result = Blogger.find(params[:id])
    if request.post? then
      @result.name = params['name']
      @result.pv = params['pv']
      @result.url = params['url']
      @result.save
      redirect_to :action => "index"
    else
      @title = "Update... id=" + params['id']

    end
  end

deleteの方は、idでfine(検索)して、インスタンスを取得。
それをdestroyして消しています。

updateの方は、同じくidでfind(検索)して、更新用にインスタンスに新しく変数を設定する。
そして、@result.saveで保存しています。

画面の表示は以下の様な感じになります。
f:id:sho322:20140412135437p:plain
f:id:sho322:20140412135443p:plain
f:id:sho322:20140412135450p:plain

<参考文献>
HerokuではじめるRailsプログラミング入門