Element.toggleではじめ非表示にするには

忘れちゃうのでメモ。

要素の表示/非常時を切り替えたい。
そんなときはElement.toggleを使うんだけど、
そういう要求って、たいていの場合、「表示されているのを隠したい」のではなく、
「隠してあるのを表示したい」という要求。

で、非同期でそのたび読み込んでもいいんだけど、
そこまでしなくてもいい、というときは要素を始め隠しておきたい。

そんなときは、対象要素のスタイル属性を
disple:hide;
display:none;
しておくといい。

遅延ロードするrender_component

前の記事でも書いた、render_componentにまつわる問題を解消すべく、
ヘルパを作ってみた。

render_componentの問題点は、以下の二つ。

1．request.xhr?で必ず読み出した元Viewのrequest.xhr?の結果が返される。
2．全ての処理が終わってからリクエストが返るので、レンダリングが遅い。

render_componentでは、
1．viewファイルを解釈
2．render_component登場
3．コントローラで処理
4．コントローラのrender :partialをレンダリング
5．レンダリング結果をViewに差し込む
6．次の行を解釈
という風に、とにかく全ての処理が流れてしまう。

で、2．～5．までの処理をとにかく速く終わらせて戻し、
実体部分は非同期で別に呼び出す方向で考える。

というわけで、ヘルパにdelayed_render_componentを作ってみた。

  def delayed_render_component(options)
#    code = "Element.update('#{options[:update]}','#{render :partial=>'common/progressing'}')"
    code = "new Ajax.Updater(#{remote_function(options)})"
    javascript_tag(code)
  end
 
使い方はlink_to_remoteを参照。
出来れば、Ajax.Updaterが戻る迄の間、プログレスアイコンでも表示したい所なんだけど、
なかなかうまくいかない。

というのも、ターゲットの書き換えだけならまだしも、
書き換えではなく、書き足し(要素を最後に挿入(:position=>'bottom'とか))などしたときに、
Element.Updateを使えないから。

対象の書き換えだけなら、
コメントアウトした行を復活させるだけでいいんだけどねえ・・・

書き足しの時には、
1．プログレスアイコンを表示するエレメントを挿入
2．Ajax.Updaterが戻って、エレメントが挿入される
3．1．のエレメントを削除

というプロセスを経なければならないという・・・

はじめから要素にランダムなIDを振ればよいかというと、
レンダリングされた要素の中身でIDを対象としていろいろ操作するのでそうも行かない。

何かいい解決方法を考えなくっちゃね。

acts_as_list

よく忘れちゃうのでメモ。

acts_as_list

first?
(同じ親のうちで)リストの一番上か？

last?
(同じ親のうちで)リストの一番下か？

move_heigher move_higher
上へ移動

move_lower
下へ移動

move_top
一番上へ移動

move_bottom
一番下へ移動

heigher_item
自分の一つ上のアイテム

lower_item
自分の一つ下のアイテム

ルートアクセスしたとき、黙って特定のコントローラーに送る

忘れちゃうのでメモ。

普通にRailsのプロジェクトを作成すると、
public/index.htmlが作成されて、
ドメイン直下にアクセスしたとき(http://www.hoge.jp/とか)にそれが表示される。

状況によっては、いきなり動的なページを表示したいときとかがある。
(というか、その方が多いかも)

どうするか。
config/routes.rbにパスの解釈とかの設定を書けるので、そこに書く。
(というか、コメントアウトしてちょっと書き換える。)

# map.connect '', :controller => "welcome"
の行。

map.connectの第一引数は、解釈させたい設定。
第二引数があると、第一引数のアクセスに対しての変更を設定できる。

上記のコメントを外してやると、
http:hoge.jp/にアクセスしたとき、
http:hoge.jp/welcome/にアクセスしたのと同等になる。

つまり、welcomeコントローラーの indexアクションが呼ばれると言うこと。

あ、あと、public/index.htmlの方がプライオリティが高いので、
必ず削除しておく必要があります。

link_to_remoteでページを部分的に書き換える

またはまってしまった。

はまったのは、link_to_remoteの:afterオプション。

データをまとめて投入するために、CSVファイルとかをアップさせて、
それを利用してデータ投入したいときとかがある。

出来ればチェックを行っておいて、
それでOKならデータ投入、等の操作をしたいとする。

そんなとき、普通にフォームだけで最後まで突き進もうとしたとき、
あまりにファイルが大きすぎるとか、
チェック操作やデータ投入操作が冗長で時間がかかったりすることはままある。

で、(パフォーマンスチューニングして何とかしろ、というのはおいといて）
タイムアウトを避けたり、あ～、これ、動いてんのかな～?
というユーザーの疑惑の目を避けるため、
ひとまず、ファイルを受け付けたよ、というページに遷移してから、
更にチェックなり、データ投入なりをする操作をしてもらうようにしようと。

そのときに、link_to_remoteでページを部分的に遷移させ、
:afterオプションで処理中の画面を描画する。

処理中の画面は、単なるテキストでもいいんだけど、せっかくだから
アニメGIFを使って処理中のものを見せようと。

というわけで、処理中のページを作成して、
:afterオプションの中でrender :partialして見せる。
呼び出し側はこんな感じ

<%= link_to_remote "時間のかかる処理", :update=>'update_column',
                                   :submit=>'params_column',
                                   :after=>"Element.update('update_column','#{render :partial=>'processing_page'}')",
                                   :url=>{:controller=>'hoge',
                                          :action=>'fuga'} %>

で、やってみたら全然ページが切り替わらない。
Javascriptのエラーみたい。

いろいろタイプミスや、オプションの順番とかを調べて見るも、全くわからない。

で、FireBugでソースを見てみてふと気づいた。
render :partialで描画されるページの中身って、Javascriptのパラメータにそのまま入ってる。

そうです。
render :partialするページで改行してはダメだったんですねえ。

教訓：

Javascriptの中に展開される可能性のある部分では、
改行は一切禁止

ということでした。