.innerHTMLは<input type="text" は使えても <html:text は使えない？

Question

お世話になります。
先日、
https://teratail.com/questions/30625
の質問をさせていただいた者です。
若干関連があるのですが、
javascriptの .innerHTML に関して不明点がありますので教えてください。

メインの開発言語はjava/SAStrutsです。

現在、以下のjavascriptは動くことを確認しております。

function insertRow(table_id) {
    // テーブル取得
    var table = document.getElementById(table_id);
    // 行を行末に追加
    var row = table.insertRow(-1);
    // セルの挿入
    var cell= row.insertCell(-1);

    // セルの内容入力
    giftKindCell.innerHTML = '<input type="text" name="text"/>';
}

ですが、これだとjava側でのvalidateで引っかかった時にテキストエリアを赤く表示する「errorStyleClass」属性が使えない状態なので、以下のように書き換えたいと思っております。

function insertRow(table_id) {
    // テーブル取得
    var table = document.getElementById(table_id);
    // 行を行末に追加
    var row = table.insertRow(-1);
    // セルの挿入
    var cell= row.insertCell(-1);

    // セルの内容入力
    giftKindCell.innerHTML = '<html:text property="text" errorStyleClass="error"/>';
}

「<input type="text"」を、「<html:text」に変えたことで、
行追加をしたときにテキストボックスが現れなくなります。

なぜhtml:textが使えないかわからないので、お分かりの方いましたら解決策を教えてください。

Comments

[kei344]

解決したのであれば、「解決済」にされてはいかがでしょうか。

Answer 1

servletやjspはサーバサイドで実行されます。
javascriptはサーバサイドで生成されたhtmlに対してクライアントサイドで実行されます。
なので、javascriptの処理で出力したjspの記述に対し、サーバ側の処理は実行されないのです。
「<html:text」は標準のhtml表現ではありません。jspで記述した際にサーブレットコンテナが標準htmlに変換してくれる、「jsp用の表記」です。
「jsp用の表記」にブラウザは対応してないから表示されないのです。

Comments

[saitama1232]

jspタグをhtmlとして使おうとしていたんですね。
サーバー側クライアント側の認識が甘かったです。ありがとうございました。

Answer 2

的外れかもしれませんが、何かのタイミングでjsを実行してテキストエリアを追加しているので、errorStyleがかけられないということがお困りのポイントだと思います。（間違ってたらすみません。）
これを解消するにはあらかじめ追加予定の部分をjspに記載しておき、styleでdisplay="none"などで隠しておき、現在カラム追加をしているタイミングで追加ではなく、display="none"を解除してあげてはいかがでしょうか？

Comments

[saitama1232]

いえ、困っているポイントはまさにその通りでございます。
「追加」という概念ではなく「隠れていたものを表示させる」という感じになるんですかね。
ありがとうございます！試してみます！

Answer 3

javascriptではなく、body に
<html:text property="text" errorStyleClass="error"/>
と書いた部分を、
画面が表示されてから「ソースを表示」などで見てみると
普通の <input type="text" /> か何かになっていると思います。

<html:text /> は <html:text /> として動くのではなくて、
画面表示時に普通の HTML 要素に変換されるのです。

これは JSP が変換してくれています。
javascript はこの変換が終わった後に走るので、こういう書き方はできません。

Comments

[sk_3122]

「エラーであるかどうか」の判定って、insertRow() のタイミングでできましたっけ？
もしできるなら、unau さんの提案のように、class="error" を付与するかどうか振り分ければ良いかなと思いますが。

[sk_3122]

あ、validate か。無理か？どうだっけ。ごめんなさい、ちょっと忘れてください。

Answer 4

よくわかっていませんが、```<html:text ... >というのは JSP か何かのタグですよね。だとしたら、JSP のコンパイラを通してサーブレットに変換され、そのサーブレットが実行されない限りは html として意味のあるタグにはなりません。JSP の解釈はサーバ側の話ですよね。 JavaScript の実行はブラウザ側（クライアント側）の話です。ここの.innterHTML` で記述するのは「生」の HTML 要素になります。ので、生の HTML （部品）として正しい文字列を書く必要があります。
このケースでは

  giftKindCell.innerHTML = '<input type="text" name="text" class="error"/>';

とか。もし、サーバサイドで何か判断して属性を差し替えたりしなければならないとしたら、そちらのコードもないとアドバイスしようがありません。