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>
app/assets/javascripts/application.js の内容を書き換える。
$(document).ready(function(){
$("#field1″).blur(function(){
if($(this).val().length>0){
$.ajax({
url: ‘/welcome/ajaxSample’,
type: ‘POST’,
datatype: ’script’,
timeout: 1000,
data: $(this),
error: function(){alert(’Server Error on ajax’)},
});
};
});
});
“blur” は、フォーカスを失ったとき、つまり field1 からカーソルが外へ出たときに実行される。
app/controllers/welcome_controller.rb に、"ajaxSample"アクションを追加する。
class WelcomeController < ApplicationController
略
def ajaxSample
@value = Time.now
end
end
新たに、app/views/welcome/ajaxSample.js.erb を作る。内容は以前のindex.js.erbとほぼ一緒だ。
$('#hint').html("<%= @value %>")
最後に、app/config/routes.rb に、
match "welcome/ajaxSample"
を追加しておく。
「:id => “field1″」な text_field_tag からフォーカスが別のフィールドやボタンに移ると、application.jsの「url: ‘/welcome/ajaxSample’」で指定されたアクションが実行され、ajaxSample.js.erbテンプレートにより、「<div id="hint”></div>」の値が書き換えられる。
実行するアクション(例では welcome_controllerのajaxSample)にロジックを書けば、入力値のチェックができる。これこそflymanがやりたかった事なのだ。
例えば、取引先コードを入れたら、取引先マスタを検索して取引先名称を表示する、とか。処理に時間が掛かるときは、timeoutの値を大きくすると良い。
前回のmouseoverなど、他のファンクションと組み合わせても良いだろう。
TrackBacks
TrackBack URL : http://www.kestrel.jp/modules/wordpress/wp-trackback.php/888
この投稿には、まだコメントが付いていません