stone creater's room

アクセスカウンタ

zoom RSS 【PGメモ:JavaScript】 別Windowで特定の項目のみsubmitする方法。

<<   作成日時 : 2010/08/12 00:29   >>

トラックバック 0 / コメント 0

とある登録画面にSQL文を入力する項目があり、登録処理を実行する前に
そのSQLをテスト実行し、別Windowで実行結果を表示する…と言う要件
(正しいSQLである事を確認してから登録したい)で、
別Windowを開いて特定の項目のみサーバーにsubmitする処理を作ったので、メモしておきます。

# SQL文をgetで飛ばすのは抵抗があった(URLにSQL文が入るし)ので、postで飛ばしています。
# まだ余り動かしていないので、変な所があったらごめんなさい…。

【概要】
画面上のtargetSqlと言う項目にSQLが入力されるので、
自動生成したフォームに
op='executeSql' (←SQLを実行するターゲットメソッド)
tmpTargetSql=targetSqlの入力値 (← targetSqlの値を上書きしたくないので、別のプロパティにセット)
をセットし、別ウィンドウをターゲットにしてsubmitしています。
(登録画面の他の値はsubmitされないので、状態を維持出来る)

(S2Struts使用なので、JSPに記述していますが、HTMLでも変わりはないと思います)

xxxx.jsp (SQLを入力する画面)
----------------------------------------------
<script language="JavaScript" type="text/javascript">
/**
* Formを自動生成し、新しいwindowにsubmitする
* @param op プロパティ
* @param value セットする値
* (パラメーターは、プロパティ名・値のセットで可変対応しています)
**/
function create_form_submit(op, value) {

  var len = arguments.length;
  if ((0 < len) && (0 < (len % 2))) {
      alert("The number of arguments is inaccurate. "); /* 引数の数が不正です。 */
      return false;
  }

  /* 新しいウィンドウを開き、自動生成したフォームのtargetにする */
  window.open("about:blank", "sqlwindow", "width=600, resizable=yes");
  var f = document.createElement('form');
  f.target = "sqlwindow";
  document.getElementsByTagName('body')[0].appendChild(f);
  f.action = document.forms[0].action;
  f.method = 'POST';

  /* 自動生成したフォームにプロパティを生成し、値をセットする */
  for (var i = 0; i < len; i++) {
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = arguments[i];
    input.value = arguments[i + 1];
    f.appendChild(input);
    i++;
  }

  /* 自動生成したフォームをsubmitする */
  f.submit();

  return false;
}
</script>

<sslext:form action="/ActXxxxInput" method="post" onsubmit="return false;">
  <html:hidden property="op" />
<table>
  <tr>
    <td> SQL</td>
    <td>
      <nested:textarea property="targetSql" rows="9" cols="75" styleId="targetSql" /> <br/>
      <html:button property="dummy" onclick='<%="create_form_submit(\'op\', \'executeSql\', \'tmpTargetSql\', $(\'targetSql\').value);"%> '>
      SQL実行
      </html:button>
    </td>
  </tr>
</table>
</sslext:form>
----------------------------------------------

xxxx_sql.jsp (SQLの実行結果を表示する画面※別Window)
----------------------------------------------
<sslext:form action="/ActXxxxInput" method="post" onsubmit="return false;">
  <html:hidden property="op" />

【SQL】<br />
<nested:write property="tmpTargetSql" /> <br />
<br />
【SQL実行結果】<br />

</sslext:form>
----------------------------------------------

ちなみにSQLの実行は、適当なDaoのSQLファイルに↓な風に記述して実行しましたf^_^;

/*$targetSql*/'select sysdate as result from dual'

テーマ

注目テーマ 一覧


月別リンク

【PGメモ:JavaScript】 別Windowで特定の項目のみsubmitする方法。 stone creater's room/BIGLOBEウェブリブログ
文字サイズ:       閉じる