日々精進

新しく学んだことを書き留めていきます

Rails - テキストフィールドでエンターキーを無効化

・フォーム内のテキストフィールドでエンターキーを押した時にSubmitせずにJavascriptコードを実行させる方法
フォーム内のテキストフィールドでエンターキーが入力された場合、通常はSubmitが実行され、
フォーム内のデータがすべてサーバに送られる。
そうしないでエンターキーが押された時にフォームの一部をAjaxで書き換えるだけにしたい場合はどうすればいいか?というのが今回のお題。
色々と調べた結果、エンターキーを押してもSubmitさせないJavascriptコードを発見。
エンターキーの押下でフォームの送信を行わないようにする : blog.nomadscafe.jp
これとAjaxのコードを組み合わせて最終的には以下のコードになった。

//テキストフィールドでエンターキーを入力してもフォームの内容がsubmitされないようにする
function BlockEnter(evt){
	evt = (evt) ? evt : event; 
	var charCode=(evt.charCode) ? evt.charCode : 
		((evt.which) ? evt.which : evt.keyCode);
	if ( Number(charCode) == 13 || Number(charCode) == 3) {
		return false;
	} else {
		return true;
	}
}

//テキストフィールドでエンターキーが押された場合、submitする代わりにAjaxリクエストを送信する
function SendOnlyAjaxRequest(event){
	if (event.keyCode == Event.KEY_RETURN) {
		new Ajax.Request('/movie/search', {
			asynchronous: true,
			evalScripts: true,
			onComplete: function(request){
				$('select-people').update(request.responseText)
			},
			parameters: Form.serialize('search_people')
		});
	}
	return BlockEnter(event);
}

これをtext_field_tag内のonkeydownイベントで実行させる。

:onkeydown => "return SendOnlyAjaxRequest(event);"

これでOK。


・findメソッドではまる
モデルクラスのfindメソッドで:allを指定するとすべてのカラムのデータを取ってくる。
:selectでカラムを指定すると指定したカラムのデータだけを取ってくる。
両方を使うと:selectの方が優先される。
今回は:selectでidカラムを指定するのを忘れてidが取ってこれずエラーになった。
これを防ぐにはどうすればいいか。。解決策は
単体テストでDBから取ってきたデータをテスト
SQLやHTMLを生成するRailsコードを書いたら必ず生成されたSQLやHTMLを確認する
ぐらいかな。