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

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

ただいまの
回答率

89.63%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,664

Alice0225

score 188

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

<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ページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

『ページの読み込み』が、サーバからのレスポンスを意図しているならば、その案では改善に繋がらないと思います。(この場合、ajaxを用いたほうがいいかと思いいます。)

単に画像だけを表示・非表示したいだければれば以下のスクリプトで対処すればよいかと思います。
document.getElementById("hoge").style.display="none"; //非表示
document.getElementById("hoge").style.display="block"; //表示

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/10 12:26

    すみません。×になる問題はラジオボタンを押したときということなので、
    Javascriptに書かれている以下が原因と思われます。
    この状態ではPathの値は変化しないのではないでしょうか。

    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)}' />";


    >画像表示したい時だけHTML記述することで「リスト表示」時に不要な読み込み時間がかからないと思ったのですがそもそもその考えから違うということでしょうか…?
    displayをblockで表示したときに画像の読み込み(ダウンロード)が実行されるわけではありません。

    画像タグにidかnameを振って、display:none、blockして切り替えたほうがいいかもしれません。

    キャンセル

  • 2016/11/10 12:34

    >>displayをblockで表示したときに画像の読み込み(ダウンロード)が実行されるわけではありません。
    意図がうまく伝わっていないようですね。
    ラジオボタンの「画像表示」を押した時にHTMLに「<img~」記述がされ、押されるまでは「<img~」をHTMLには記述しない(空のDivを用意する)ことで、ラジオボタンで画像表示に切り替えない限り写真が読み込まれず(そもそもHTMLに記載しないから当然)読み込み時間が余計にかかることを防ぐという意味合いです。

    キャンセル

  • 2016/11/10 13:04

    確認となりますが、以下のJSPコードの変数(human)はどこで定義されておりますでしょうか。

    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)}' />";
    }

    ブラウザからソースを見たときにelements[i].innerHTMLに渡す値に問題ないでしょうか。

    キャンセル

+1

画像を差し替えるだけなら簡単ですが、代替文(alt属性)も変える場合はひと手間必要です。

以下の例は ajaxを利用せずに、ラジオボタンのvalue値に画像のURLとaltの内容をあらかじめ出力しておいたものを取得する例です。
例文なので、実装されているコードと照らし合わせてみましょう。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ラジオボタンで画像切り替え</title>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
    $("input").bind("click" ,function() {
        val = $(this).val();

        imgPath = val.substring(0,val.indexOf(","));
        altValue = val.substring(val.indexOf(",") +1);

        $("#targetImage").attr("src","images/" + imgPath);
        $("#targetImage").attr("alt",altValue);
    })
});
</script>
</head>
<body>
<form name="form">
    <label for="radio1">1</label>
    <input type="radio" id="radio1" name="picselect" value="1.jpg,alt1です" />

    <label for="radio2">2</label>
    <input type="radio" id="radio2" name="picselect" value="2.jpg,alt2です" />

    <label for="radio3">3</label>
    <input type="radio" id="radio3" name="picselect" value="3.jpg,alt3です" />

    <label for="radio4">4</label>
    <input type="radio" id="radio4" name="picselect" value="4.jpg,alt4です" />

    <label for="radio5">5</label>
    <input type="radio" id="radio5" name="picselect" value="5.jpg,alt5です" />
</form>
<div id="imagebox">
    <img id="targetImage" alt="" src="images/1.jpg" />
</div>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

check解決した方法

0

aki178さん、A-pZさん
結論の提示が遅れてしまい申し訳ございません。
ご回答頂きありがとうございました。
頂いた情報をもとに四苦八苦しておりましたが、私の実力不足の為実現・実装には至れませんでした。
そんなこんなしているうちに依頼元から「ラジオボタンによる表示形式の変更はやっぱり要りません。リスト表示のみでいいです。」と言われてしまい、実装の必要性まで無くなってしまいました。
お二方にご教授頂いた内容をもとに引き続き勉強し、次回以降の案件に活かしていきたいと思います。
貴重なお時間を割いて頂き、本当にありがとうございました。
まことに勝手ではありますが、ここでクローズとさせていただきます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる