質問編集履歴

1 Div説明の追記

Alice0225

Alice0225 score 190

2016/11/10 11:58  投稿

JSP ラジオボタンによってHTML文を変える
現在、既存の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文を設定して画像が読み込まれるようにしたいのです。
上記コードでは画像すべてが×(下記画像)になってしまいます。
![イメージ説明](5845d9c8482714e88990ae854b83e99e.png)
どのようにすれば改善が見込めますでしょうか…
  • Java

    20508 questions

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

  • HTML

    17612 questions

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

  • JSP

    1383 questions

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

  • ラジオボタン

    82 questions

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

  • Seasar2

    61 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る