はじめに

はじめまして。テクノロジー&エンジニアリングセンターの羽部(はぶ)と申します。新人研修や、ITアーキテクト育成などの技術者育成を担当しています。

今回は、Nablarch解説書に記載されているけれど、埋もれてしまって探しにくい情報を掘り起こして説明するのを目的に記事を書きました。

Nablarchが提供しているJSPカスタムタグ の中には、サブミットを行うものがいくつかあります。 それらを使ってサーバーにデータを送信する前に、何かしら処理を挟みたい、という機会はよくあるのではないでしょうか。例えば、確認ダイアログを表示したり、入力値チェックを行ったり。

ところが、Nablarchのサブミットを行うカスタムタグ、このカスタマイズにちょっとしたコツがいるんです。 そのコツを紹介します。

サブミット前に処理を実行したい

登録確認のためのダイアログを表示させる場合を例に説明します。 サブミットタグのonclick属性を使うのですが、まずは失敗例から。

<html>
  <head>
    <script type="text/javascript"> 
      <!-- 
        function check(){
          if(window.confirm('送信してよろしいですか？')){
            return true;
          } else {
            return false;
          }
        }
      -->
    </script>
  </head>
  <body>
    <n:form>
      <!-- ～中略～ -->
      <n:submit
       type="submit"
       uri="register"
       value="登録"
       onclick="return check();"/>
    </n:form>
  </body>
</html>

ダイアログは表示されますが、これだとサブミットが実行されません。Nablarchのサブミットタグは、JavaScriptを使用してサブミットを処理しているからです。このJavaScript関数を自前の関数から呼び出してやらないといけません。

これに対応したのが以下のコードです。

<html>
  <head>
    <script type="text/javascript"> 
      <!-- 
        function check(event, element){
          if(window.confirm('送信してよろしいですか？')){
            return nablarch_submit(event, element);
          } else {
            return false;
          }
        }
      -->
    </script>
  </head>
  <body>
    <n:form>
      <!-- ～中略～ -->
      <n:submit
       type="submit"
       uri="register"
       value="登録"
       onclick="return check(event, this);"/>
    </n:form>
  </body>
</html>

次の3カ所を修正しました。

  • 自前のcheck関数に引数を追加しました。
  • check関数でtrueだった場合の戻り値をnablarch_submit(event, element)に変更しました。これが、Nablarchがサブミットに使用しているJavaScript関数です。サブミットするには、これを呼び出さなくてはなりません。
  • check関数の修正に合わせ、サブミットタグのonclick属性の記述を修正しました。

このように、サブミット前に処理を追加したい場合は、以下の2点がポイントです。

  • サブミットタグのonclick属性を使う。
  • 自前の処理の中(最後)でnablarch_submit(event, element)を呼び出す。

おわりに

いかがだったでしょうか。知ってしまえば大したことのない内容ですが、たどり着くまでが遠いものです。そこのショートカットとしてお役に立ちますように。

本コンテンツはクリエイティブコモンズ(Creative Commons) 4.0 の「表示—継承」に準拠しています。