AjaxHelper - simframe Wiki - simframe

AjaxHelper

Simframeでは、prototype.js,script.aculo.usを使用して、AJAXをサポートします。

javascript_include_tag

SimframeでJavascriptを使用するには、次のようにテンプレートに記述します。

<{javascript_include_tag()}>

このように記述することによって、prototype.js,effects.js,dragdrop.js,controls.jsファイルを読み込みます。 javascript_include_tagヘルパーは、次のような書き方もできます。

<{javascript_include_tag('defaults')}> // prototype,effects,dragdrop,controls
<{javascript_include_tag('defaults','foo')}> // prototype,effects,dragdrop,controls,foo
<{javascript_include_tag('defaults','foo','bar')}> // prototype,effects,dragdrop,controls,foo,bar

stylesheet_link_tag

stylesheet_link_tag($args..)

引数で指定されたスタイルシートタグを返す。拡張子.cssは、自動的につけられる。

<{stylesheet_link_tag("application")}>
// => <link rel="Stylesheet" type="text/css" media="screen" href="/css/application.css" />

<{stylesheet_link_tag("application",array('media'=>"all"))}>
// => <link href="/stylesheets/style.css" media="all" rel="Stylesheet" type="text/css" />

<{stylesheet_link_tag("application","window/default",array('charset'=>'UTF-8'))}>
// => <link rel="Stylesheet" type="text/css" media="screen" href="/css/application.css" charset="UTF-8" />
      <link rel="Stylesheet" type="text/css" media="screen" href="/css/window/default.css" charset="UTF-8" />

link_to_remote

link_to_remote($name,$options=array(),$html_options=array())

XMLHttpRequestを使って、$options['url']で定義されたリモートの結果を返す。リクエストの結果は、$options['update']で指定されたDOMオブジェクトのidに挿入される。 サーバに投げられるリクエストは、通常、POSTにて行われます。

<{link_to_remote("Env",array('update'=>'env_status','url'=>'/top/getenv'))}>

$options['update']にハッシュを使うことによって、簡単な出力結果の出しわけを行うことができる。 オプションで、$options['position']とbefore,top,bottom,afterによって、どのように指定されたDOMエレメントが更新されるかを決めることもできる。

<{link_to_remote("Env",array('update'=>array('success'=>'Success','failure'=>'error'),'url'=>'/top/getenv'))}>

link_to_remoteは、通常XMLHttpRequestによりPOSTメソッドにてサーバにリクエストを投げるが、$options['method']により、GET,PUT,DELETE(PUT,DELETEは、単に変えたように振舞うだけ)

<{link_to_remote("Delete",array('url'=>'/top/user/user-XXXX','method'=>'delete'))}>

デフォルトで、リモートのリクエストは、非同期で処理され、Javascriptのコールバック関数が必要になる。 すべてのコールバック関数は、XMLHttpRequestからrequestオブジェクトを取得できる。 サーバーからのレスポンスを取得するには、request.responseTextを使用する。 HTTPのステータスを取得するには、request.statusを取得する。

<{link_to_remote("Word",array('url'=>"/top/word",'complete'=>"undoRequestCompleted(request)"))}>

コールバックは、次のものが指定できる(書かれた順に呼ばれる)

loading	ブラウザがリモートドキュメントを読み込んでいるときに呼ばれる
loaded	ブラウザがリモートドキュメントを読み終わったときに呼ばれる
interactive	ブラウザが読み込み中でも、ユーザがリモートドキュメントにアクセスしたとき呼ばれる
success	XMLHttpRequestが完了して、HTTPステータスコードが2XX番台のときに呼ばれる
failure	XMLHttpRequestが完了して、HTTPステータスコードが2XX番台でないとき呼ばれる
complete	XMLHttpRequestが完了したとき(もしsuccessまたはfailureが、あれば、その後に呼ばれる)

特定のステータスコードに対して、successとfailureを定義することができる。

<{link_to_remote("Word",array('url'=>"/top/word",'404'=>"alert('Not found?Wrong URL...')",'failure'=>"alert('HTTP Error: '+request.status+'!'")}>

statusコードのコールバックが存在すれば、success,failureハンドラは、上書きされます。 もし、何らかの理由で非同期プロセスの動作中に何かしたい場合は、$options['type']=synchronousを指定することができる。 ブラウザ側では、オプションパラメータでJavascript code snippetsを渡すことにより、ロジックを実行できる。次のものを使用することができる。

confirm	確認ダイアログを表示する
condition	条件式によりリモートリクエストを実行する。ブラウザ側の条件式を記述してください。
before	リクエストが初期化される前に呼ばれる
after	リクエストが初期化され、loadingが呼ばれる前に呼ばれる
submit	フォームエレメントの親のDOMエレメントIDを指定する。デフォルトでは、これは、currentのフォームとなるが、テーブルの行のIDや他のDOMエレメントのIDとなることがある。

<{link_to_remote("Time",array('update'=>'current','url'=>'/top/get_time','before'=>"$('indicator').show()","success"=>"$('current').visualEffect('highlight')","failure"=>"alert('Error ')","complete"=>"$('indicator').hide()"))}>
<{link_to_remote("Delete Checked Item",array("condition"=>"$('checkbox').checked","url"=>"/top/delete_item"))}>
<{link_to_remote("Send Fake Form",array('submit'=>"fakeForm","url"=>"/top/get_form","complete"=>"alert(request.responseText)"))}>

link_to_function

link_to_function($name,$function)

onclickハンドラを使ってJavaScript関数を実行し、その後にreturn falseを行う。

<{link_to_function("Toggle","$('explain').toggle()")}>
// => <a href="#" onclick="$('explain').toggle(); return false;">Toggle</a>

<{link_to_function("Delete","if (confirm('Are you sure?')) do_delete();")}>
// -> <a href="#" onclick="if (confirm('Are you sure?')) do_delete(); return false;">Delete</a>

button_to_function

button_to_function($name,$function)

link_to_functionのボタン版。

<{button_to_function("Toggle","$('explain').toggle()")}>
// => <button href="#" onclick="$('explain').toggle(); return false;">Toggle</button>

form_remote_tag

form_remote_tag($options=array())

通常のPOSTで送信する代わりにXMLHttpRequestを使ったバックグラウンドでのsubmitを行う。フォーム要素をJavaScriptでシリアライズして送信しても、受け取ったサーバ側では通常の通信のように動作する。指定できるオプションは、urlと後はlink_to_remoteと同じものが使える。 JavaScriptが動作しない場合は、$options['html']を使えば、指定先にリクエストを投げることができる。

<{form_remote_tag(array('html'=>array('action'=>'/some/place')))}>

<{form_remote_tag(array('update'=>'reversed','url'=>'/top/reverse'))}>
<div><{submit_tag('Save')}></div>
</form>

submit_to_remote

submit_to_remote($name,$value,$options=array())

通常のPOSTではなく、バックグラウンドでXMLHttpRequestを使用したsubmitを行うためのbutton inputタグを返す。$optionsに指定できる引数は、form_remote_tagと同じ。

<{submit_to_remote('submit','Reverse',array('update'=>'reverse','url'=>'/top/reverse'))}>
// => <input type="button" onclick="new Ajax.Updater('reverse','/top/reverse',{asynchronous:true,evalScripts:true,parameters:Form.serialize(this.form)}); return false;" name="submit" value="Reverse" />

observe_field

observe_field($field_id,$options=array())

$field_idによるDOM IDで指定されたフィールドを監視し、フィールドの内容が変更されたときにcallback関数を呼ぶ。デフォルトのcallbackは、Ajaxによる呼び出しとなり、監視されたフィールドの値がAjaxの呼び出しのパラメータとして送信される。 必須のオプションは、次のどちらか。

url	フィールドが変更されたときに呼ばれるアクションのURL
function	URLへのリモート呼び出しをする代わりの関数を指定することができる

追加のオプションは、次のとおり

frequency	フィールドが変わったかをチェックする頻度(秒による指定)。もし、指定されていないか0以下であれば、時間での監視ではなく、イベントによる監視を行う。
update	XMLHttpRequestのresponseTextで更新する要素のDOM ID
with	XMLHttpRequestに渡すパラメータのJavaScript式。デフォルトでは、監視するフィールドのkeyとvalueを送信。カスタマイズした表現式は、正常なURLのquery文字列としなければならない。フィールドのvalueは、JavaScriptのvalue変数に格納されている

例

"with"=>"'my_custom_key='+value"
"with"=>"'person[name]='+prompt('New name')"
"with"=>"Form.Element.serialize('other-field')"

"with"=>'name'

は、次の短縮形となり、パラメータのkey名を変えたに過ぎない

"with"=>"'name='+value"

on	監視するイベントハンドラを指定する。デフォルトでは、textフィールドとtextareaには、changedがセットされていて、radioボタンとcheckboxには、clickがセットされている。変わりに、"blur"や"focus"や他のイベントを指定することができる。

以上に加えて、link_to_remoteの$optionsも指定することができる。

<{observe_field("text_for_observe",array('update'=>'reserve','url'=>'/top/reverse','with'=>'text_for_observe'))}>
<{observe_field("text_for_observe",array('update'=>'reserve','url'=>'/top/reverse'))}>
<{observe_field("text_for_observe",array('update'=>'reserve','url'=>'/top/reverse','with'=>'text_for_observe','frequency'=>3))}>

observe_form

observe_form($form_id,$options=array())

form_idで指定されたDOM IDのフォームを監視し、その中の内容が変更されれば、関数を呼び出す。デフォルトでは、Ajaxによる呼び出しを行う。デフォルトでは、監視されたフィールドのすべてのフィールドがAjax呼び出しのパラメータとして送信される。 observe_formのオプションは、observe_fieldと同じものである。withオプションに対するvalue変数は、デフォルトでシリアライズしたフォームとしてセットされる。

<{observe_form("myForm",array('update'=>'reverse','url'=>'/top/reverse'))}>
<{observe_form("myForm",array('update'=>'reverse','url'=>'/top/reverse','frequency'=>3))}>

戻る