JavaScriptでポップアップウィンドウを表示する最小サンプル

ポップアップウィンドウを最も簡単に実現できるのは、JavaScriptのalert関数である。

alertのサンプル

しかしながら、alert関数では表示するテキストをパラメータとして渡せるだけなので、ポップアップウィンドウとは言い難い。

次に簡単に実現できるのは、window.openを利用する方法である。

window.openのサンプル

用途によってはこれでも十分なのだが、要はブラウザの新規ウィンドウを開いているだけなので、ウィンドウの細かい制御はできないし、セキュリティの設定によってはポップアップウィンドウの警告が表示されてしまう場合もある。

現実的な方法としては、jQueryとCSSを使う方法になる。

まず、ページ内に、下記のようにポップウィンドウとして表示するDIVタグを用意しておく。

<div id="popupwindow">
  <div id="popuowindow_message"></div>
  <div id="popupwidow_close">OK</div>
</div>

このままでは、DIVタグの中身が丸見えなので、スタイルシートで下記のように非表示にしておく。

#popupwindow {
  display: none;
}

JavaScript側では、下記のように記述する。

$("#popupwindow3").click(function(e){
  $('#popuowindow_message').text('こんにちは!');
  $('#popupwindow').css({top: 400, left: 20}).fadeIn(100);
  $('#popupwidow_close').click(function() {$('#popupwindow').fadeOut(100);});
  return false;
});

1. メッセージのテキストを設定。
2. ポップアップウィンドウの表示。
3. OKがクリックされた場合にウィンドウを非表示。

popup windowで表示するサンプル

最小サンプルなので、余計な装飾などは行っていないが、DIVタグをCSSで装飾して見栄えを良くしたり、JavaScriptのイベントを追加してタイトルバーでドラッグできるようにするなど、いろいろなことはできるようだ。

今回作成したソースコードの参照はこちらから。

https://gist.github.com/torafugu/5559183

今回参考にさせていただいたブログ記事。

jQueryで「window.open」タイプのポップアップウィンドウ方法
http://black-flag.net/jquery/20100630-1210.html

ドラッグ可能なポップアップウインドウを作ろう - jQuery入門
http://ponk.jp/jquery/basic/ipop

OK

Formで指定したmodel以外のmodelを指定してコンボボックスを生成するサンプル

上図のようなmodelの構造で、DouroFusetsuの更新画面を考えてみる。

まずはscaffold。（実行結果は省略。）

rails generate scaffold douro_fusetsu shichoson:references douro:references

デフォルトの状態の画面では、下図のように型をreferencesにして作成したmodelクラスのハッシュを入力しなければならないので、

コンボボックスでIDを選択できるように、下図のように変更する。

View側のソースは下記のようになる。

<%= form_for(@douro_fusetsu) do |f| %>
  <% if @douro_fusetsu.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@douro_fusetsu.errors.count, "error") %> prohibited this douro_fusetsu from being saved:</h2>

      <ul>
      <% @douro_fusetsu.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :shichoson %><br />
    <%= f.collection_select(:shichoson_id, Shichoson.find(:all), :id, :name) %>
  </div>
  <div class="field">
    <%= f.label :douro %><br />
    <%= f.collection_select(:douro_id, Douro.find(:all), :id, :name) %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

市町村では、選択肢の数が多すぎる(日本全国で1742もある)ので、都道府県を選択して数を絞り込めるようにしたい。

TodofukenとShichosonは親子関係であるものの、DouroFusetsuはTodofukenと直接関係がないので、f.collection_selectは使うことができない。

その代わりに、下記のように、f.をつけずにcollection_selectを使うことにする。

<%= collection_select(:douro_fusetsu, "todofuken_id", Todofuken.find(:all), :id, :name) %>

しかしながらエラーが表示されてしまう。

f.がついていなくても、formの名前が同じ場合は、form_forで関連づけられているmodelのメンバーではないということでエラーになってしまうようだ。

下記のように、シンボル:douro_fusetsu ではなく、まったく別の名前を指定すると、

<%= collection_select("help", "todofuken_id", Todofuken.find(:all), :id, :name) %>

エラーが出ずに表示されるようになった。

Railsで親テーブルの情報を指定してfindするサンプル

上図のような親子関係の場合に、親テーブル(Todoufuken)から子テーブル(Shichoson)をincludeして、子テーブルの情報を指定してfindするというサンプルは既にあるようだ。

[memo][Rails]連携先テーブルの条件を指定してfind
http://bugcloud.com/?p=571

実際に、下記のように記述すると実現できる。

Todofuken.all(:include => :shichosons, :conditions => ["shichosons.name = ?", '名古屋市'])

ところが、同様の記述で、子テーブル(Shichoson)から親テーブル(Todoufuken)をincludeして、親テーブルの情報を指定してfindしようとしても、うまくいかない。

Shichoson.all(:include => :todofuken, :conditions => ["todofuken.name = ?", '愛知県'])

ちなみに、findのincludeではなく、下記のように子テーブルを特定した上でリンクした記述では動作している。

Shichoson.first.todofuken.name

conditionsの部分のテーブル名の指定は、model側で単数形でbelongs_toとなっている場合でも、

class Shichoson < ActiveRecord::Base
  belongs_to :todofuken
end

このように複数形を指定する必要があるようだ。

Shichoson.all(:include => :todofuken, :conditions => ["todofukens.name = ?", '愛知県'])

シンボル(:xxxx)として指定した場合と、実際のテーブル名("xxxxs")として指定した場合の違いということなのだろうが、統一感がなくてややこしい。。

今回は、下記の記事を参考にさせていただいた。

rails:3610
http://www.fdiary.net/ml/rails/msg/3610