ActiveScaffoldとｊQueryのthickboxを組み合わせる

ActiveScaffoldとjQueryでモーダルダイアログを表示するthickboxを組み合わせてみました。

郵便番号をzipsテーブルに格納してあり、郵便番号を検索するための画面をthickboxでモーダルダイアログとして表示します。
そこで検索とかして最終的に親のwindowの方の郵便番号欄に値を入れる感じです。

郵便番号欄のフォームのためのviewは以下のような感じです。
jqueryやthickboxのjavascriptやstylesheetは取得してpublic配下に適切においてあるとします。

・・・略
  <%= javascript_include_tag 'jquery' %>
  <%= javascript_include_tag 'thickbox' %>
  <%= stylesheet_link_tag 'thickbox' %>
・・・略
　郵便番号：
　<%= text_field_tag("zip","", {:maxlength => "7"}) %>
　<%= link_to "検索",{:controller=>"zips",:action=>"index",:TB_iframe=>"true",:height=>"400",:width=>"600"},{:class=>"thickbox",:title=>"郵便番号検索"} %>
・・・略

ActiveScaffoldを使っているとTB_iframeを指定してiframeで開かないとうまく開きませんでした。

これから呼び出されるZipsControllerは以下のような感じです。
一応、モーダル用のlayoutを別途用意しているものとしています。
こちらのレイアウト上でjqueryは読み込んでいます。
モーダル上で郵便番号をクリックすると親windowの郵便番号欄に渡されるようにします。

class ZipsController < ApplicationController
  layout "modal"

  active_scaffold :zips do |config|
    config.label = "郵便番号検索"
    config.actions = [:list, :search]
    config.columns = [:code,:address]
    config.columns[:code].label = "郵便番号"
    config.columns[:address].label = "住所"
    config.list.sorting = [{:code => :ASC}]
    config.search.columns << [:code,:address]
  end
end

module ZipsHelper
  def code_column(record)
    link_to_function record.code,"$('#zip',window.parent.document).val('#{record.code}');
    self.parent.tb_remove();"
  end
end

ZipsHelperをこのコントローラーを書いたファイルと同じファイル内に書いています。
ZipsHelperを普通にhelperとして用意してしまうとcodeを利用する部分すべて置き換わってしまいます。
iframeで表示しているので親windowの値を利用するためにparentをちょいちょい書いてあります。

最近は便利なものが本当にいろいろありますね。