質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

Seasar2

Seasar2はJ2EE/Java EEでの大規模な開発を効率良く行なうためのフレームワークです。 必要な設定ファイルを従来のものと比べて少なくし、依存性を分離して記述しています。 そのため、生産性の高いプログラム開発が可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

JSP ラジオボタンによってHTML文を変える

Alice0225
Alice0225

総合スコア206

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

Seasar2

Seasar2はJ2EE/Java EEでの大規模な開発を効率良く行なうためのフレームワークです。 必要な設定ファイルを従来のものと比べて少なくし、依存性を分離して記述しています。 そのため、生産性の高いプログラム開発が可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

3回答

0リアクション

0クリップ

4274閲覧

投稿2016/11/10 02:22

編集2016/11/10 02:58

現在、既存のWebアプリ改修を行っています。
ラジオボタンに選択値によってDiv内容の書き換えを行うようにプログラミングをしたのですが、思うように表示されません。
原因についてお伺いできればと思います。

JSP

<script type="text/javascript"><!-- <%-- ページ読み込み時にラジオボタンをチェックする --%> function displayOnload(radio) { if (radio == "画像") { var elements = document.getElementsByClassName("test"); for (var i=0;i<elements.length;i++) { elements[i].innerHTML = "<img style='max-height: 150px; max-width: 150px;' src='${f:url('/download/image')}?path=${f:u(human.photo)}' alt='${f:h(human.attribute.fullName)}' />"; } document.getElementsByName("display")[1].checked = true; document.getElementById('id1').style.display = "none"; document.getElementById('id2').style.display = "block"; } else { document.getElementsByName("display")[0].checked = true; sessionStorage.radio = "リスト"; document.getElementById('id2').style.display = "none"; document.getElementById('id1').style.display = "block"; } } <%-- ラジオボタンによる表示形式の変更 --%> function displayChange(str) { radio = document.getElementsByName('display'); if (radio[0].checked) { document.getElementById('id2').style.display = "none"; document.getElementById('id1').style.display = "block"; sessionStorage.radio = "リスト"; } else if (radio[1].checked) { var elements = document.getElementsByClassName("test"); for (var i=0;i<elements.length;i++) { elements[i].innerHTML = "<img style='max-height: 150px; max-width: 150px;' src='${f:url('/download/image')}?path=${f:u(human.photo)}' alt='${f:h(human.attribute.fullName)}' />"; } document.getElementById('id1').style.display = "none"; document.getElementById('id2').style.display = "block"; sessionStorage.radio = "画像"; } } <%-- 準備時 --%> $(document).ready(function() { displayOnload(sessionStorage.getItem("radio")); }); --></script> <!-- ラジオボタン --> <p> <input type='radio' name='display' id='radio1' value='1' onclick="displayChange('radio0');"><label for='raddio1'>リスト表示</label> <input type='radio' name='display' id='radio2' value='2' onclick="displayChange('radio1');"><label for='raddio2'>画像表示</label> </p> ..... <!-- リスト表示用div --> <div id="id1" class="class1"> <c:forEach var="human" items="${humanList}" varStatus="status"> <a href="${f:url('/humanMenu/')}${f:u(human.humanCd)}">${f:h(human.attribute.fullName)}</a> </c:forEach> </div> <!-- 画像一覧表示用div --> <div id="id2" class="class2" style="display:none"> <c:forEach var="human" items="${humanList}" varStatus="status"> <div class="test" style="width: 150px; text-align: center;"> <%-- ※※※ここの表示がうまくいかない※※※ --%> <%-- <img style="max-height: 150px; max-width: 150px;" src="${f:url('/download/image')}?path=${f:u(human.photo)}" alt="${f:h(human.attribute.fullName)}" /> --%> <div> </c:forEach> </div>

元々の作りとしてはすべて読み込んで表示・非表示の切替のみ行っていたのですが、
画像ファイルが結構な数あるため(div class="test")、ページの読み込みに時間がかかってしまっています。
そこで(div class="test")の画像表示文をHTMLに記入せず、ラジオボタンで「画像表示」が選択された場合にHTML文を設定して画像が読み込まれるようにしたいのです。
上記コードでは画像すべてが×(下記画像)になってしまいます。
イメージ説明
どのようにすれば改善が見込めますでしょうか…

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

Seasar2

Seasar2はJ2EE/Java EEでの大規模な開発を効率良く行なうためのフレームワークです。 必要な設定ファイルを従来のものと比べて少なくし、依存性を分離して記述しています。 そのため、生産性の高いプログラム開発が可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。