link_to_remoteを使ってテキストフィールドをupdateする

ruby

cheatsheet

先日から引き続きRoRをいじり倒しています。Ajaxを使ってテキストフィールドの中身をupdateする機能を作りたかったのですが、divの中身をupdateするようなサンプルはいくつも見つかる^*1ものの、テキストフィールドの中身をサーバに送信して、処理した結果でテキストフィールドの内容を書き換えるサンプルというのは見つけることができませんでした。

困ってしまったので、英語のサイトも対象に探してみたところAriejan.net RoR: link_to_remote with a text_field value as an argumentというエントリを見つけました。これはlink_to_remote()を使ってテキストフィールドの値をAjaxを使ってpostする方法のようなので、さらに処理した結果をRJSを使ってページに書き戻してやる部分を書き足すことにしました。

そのほかにもAIRS Labs: Ajax on Rails(RJS)のCheat Sheetをつくってみたというサイトも見つけてしまいました。このCheat Sheetも便利です。

† ちょっと作ってみたもの

なんか的外れなことをやっているのではないかという不安に襲われますが、とりあえずテストとして、<input type="text" />と<textarea>～</textarea>の入力内容をAjaxでサーバに送信して、英字の小文字を見つけたら大文字に変換するというサンプルを作ってみました。

app/controllers/test_controller.rb

class TestController < ApplicationController
  def ajaxupdate
    id = params[:id]
    contents = params[:contents]
    contents.upcase!
    
    render :update do |page|
      page[id.to_sym].visual_effect( :highlight )
      page[id.to_sym].value = contents
    end
  end
end

app/views/test/index.rhtml

<html>
    <head>
        <title>link_to_remote with a text_field value as an argument</title>
        <%=javascript_include_tag :defaults %>
    </head>
    <body>
        <div id="contents">
            text_field:<%=text_field 'item', 'oneline', :size => 60 %>
            <br/>
            text_area:
            <br/>
            <%=text_area 'item', 'multiline', :cols => 50, :rows => 10 %>
            <br/>
            <%=link_to_remote(
                "text_field変換！",
                :url =>{ :action => :ajaxupdate },
                :with => "'id=item_oneline&contents='+encodeURIComponent($F('item_oneline'))"
            )%><br />
            <%=link_to_remote(
                "text_area変換！",
                :url =>{ :action => :ajaxupdate },
                :with => "'id=item_multiline&contents='+encodeURIComponent($F('item_multiline'))"
            )%><br />
        </div>
    </body>
</html>