お茶の水駅
	東京駅

前回は ”:remote => true” を付けるだけでajaxなアプリになったよ、って話だった。
でも、やりたいことはソレじゃない。
ということで、前回のtest01プロジェクトを書き換える。

app/views/welcome/index.html.erb の内容を消去し、以下に入れ替える。

<%= text_field_tag :field1, :id => “field1″ %><BR/>
<%= text_field_tag :field2, :id => “field2″ %><BR/>
<div id="hint”></div>

入力項目２個と、ajaxで書き換えるエリア “hint” を指定している。

app/assets/javascripts/application.js に以下を追記する。

$(document).ready(function(){
　$("#field1″).mouseover(function(){
　　$(’#hint’).html("Field1のバルーンヘルプ")
　});
　$("#field1″).mouseout(function(){
　　$(’#hint’).html("")
　});
　$("#field2″).mouseover(function(){
　　$(’#hint’).html("Field2のバルーンヘルプ")
　});
　$("#field2″).mouseout(function(){
　　$(’#hint’).html("")
　});
});

“field1″ の mouseover 時に、"hint” エリアに文言を表示
“field1″ の mouseout 時に、"hint” エリアを消す
“field2″ の mouseover 時に、"hint” エリアに文言を表示
“field2″ の mouseout 時に、"hint” エリアを消す
という処理をしている。これで、view側の text_field_tag にマウスが乗ったかどうかを監視してくれる。

app/views/welcome/index.js.erb は不要だ。welcome/index アクションの中身も不要。

$(document).ready は、view画面表示が完了してからjavascriptを有効にするおまじないらしい。Javascriptをhtml内に書いているときには意味があるが、今回はファイルを分離しているので不要かも知れない。

入力欄にマウスを乗せると、ヒントが表示される。Windowsアプリでよくやる、バルーンヘルプ的な。

でも、本当にやりたいのはコレでもないんだよなぁ。
やっぱり、ajaxもjavascriptもさ?っぱり分からない。Rails3.2 + jQuery とかの解説書、ないかなぁ。