A Day In The Life

とあるプログラマの備忘録

シンプルなポップアップ画面を作ってみた。その2

javascript struts

前回、シンプルなポップアップ画面を作ると言っておきながらあまりシンプルじゃなかったなぁと反省しています。

で、修正してみました(Firefox2.0.0.6とIE6で動作確認済みです)。



では親画面のJSPからみていきましょう。

:
省略
:
<script type="text/javascript">
var windows = new Object();
function openwin(action, textBox) {
  //IEではドットがあるとエラーになるためドットを置換
  var name = textBox.name.replace('.','');
  if (windows[name] == undefined || windows[name].closed) {
    windows[name] = window.open(action, name);
  }
  windows[name].dialogArguments = textBox;
}
</script>
:
省略
:
<html:text property="product.id" name="orderItemForm" />
<input type="button" name="search" value="検索"
  onclick="openwin('<html:rewrite action='Popup?search=search' />',
  this.form['product.id'])">

JavaScriptでwindows[name]としているのはポップアップ画面を開いたままボタンを押されたときの対策のためです。

openwinメソッドを呼ぶときに第2引数にテキストボックスオブジェクトを渡してやるのがコツです。

ちなみにStrutsのAction,ActionForm,struts-config.xmlは前回と同じなので省略します。



次はポップアップ画面のJSPです。

:
省略
:
<script type="text/javascript">
var selectedValue;
function choose(value) {
  selectedValue = value;
}
function selected() {
  window.dialogArguments.value = selectedValue;
  window.close();
}
</script>
:
省略
:
<c:forEach items="${orderItemForm.products}" var="products"　varStatus="status">
  <html:radio idName="products" property="product.id"
    name="orderItemForm" value="id" onclick="choose(this.value);" />
  <c:out value="${products.id}" />
  <c:out value="${products.name}" />
  <c:out value="${products.unitPrice}" />
</c:forEach>
<html:button property="select" value="選択" onclick="selected();" />
<html:button property="close" value="キャンセル" onclick="window.close();" />

前回とは違いラジオボタンのクリック時に値をセットするようにしています。

window.openerを使わずにwindow.dialogArgumentsにテキストボックスオブジェクトをセットしているのでJavaScriptの汎用性が高くなっているのが特徴です。



複数の値を返したいときなどは修正がいりますが前回よりはシンプルになったかと思います。

関連記事