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

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

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

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

Java

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

ラジオボタン

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

Seasar2

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

HTML

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

Q&A

解決済

3回答

4857閲覧

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

Alice0225

総合スコア206

JSP

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

Java

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

ラジオボタン

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

Seasar2

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

HTML

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

0グッド

0クリップ

投稿2016/11/10 02:22

編集2016/11/10 02:58

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

JSP

1<script type="text/javascript"><!-- 2<%-- ページ読み込み時にラジオボタンをチェックする --%> 3function displayOnload(radio) { 4 if (radio == "画像") { 5 var elements = document.getElementsByClassName("test"); 6 for (var i=0;i<elements.length;i++) { 7 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)}' />"; 8 } 9 document.getElementsByName("display")[1].checked = true; 10 document.getElementById('id1').style.display = "none"; 11 document.getElementById('id2').style.display = "block"; 12 } else { 13 document.getElementsByName("display")[0].checked = true; 14 sessionStorage.radio = "リスト"; 15 document.getElementById('id2').style.display = "none"; 16 document.getElementById('id1').style.display = "block"; 17 } 18} 19 20<%-- ラジオボタンによる表示形式の変更 --%> 21function displayChange(str) { 22 radio = document.getElementsByName('display'); 23 if (radio[0].checked) { 24 document.getElementById('id2').style.display = "none"; 25 document.getElementById('id1').style.display = "block"; 26 sessionStorage.radio = "リスト"; 27 } else if (radio[1].checked) { 28 var elements = document.getElementsByClassName("test"); 29 for (var i=0;i<elements.length;i++) { 30 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)}' />"; 31 } 32 document.getElementById('id1').style.display = "none"; 33 document.getElementById('id2').style.display = "block"; 34 sessionStorage.radio = "画像"; 35 } 36} 37 38<%-- 準備時 --%> 39$(document).ready(function() { 40 displayOnload(sessionStorage.getItem("radio")); 41}); 42 43--></script> 44 45<!-- ラジオボタン --> 46<p> 47 <input type='radio' name='display' id='radio1' value='1' onclick="displayChange('radio0');"><label for='raddio1'>リスト表示</label> 48 <input type='radio' name='display' id='radio2' value='2' onclick="displayChange('radio1');"><label for='raddio2'>画像表示</label> 49</p> 50 51..... 52<!-- リスト表示用div --> 53<div id="id1" class="class1"> 54 <c:forEach var="human" items="${humanList}" varStatus="status"> 55 <a href="${f:url('/humanMenu/')}${f:u(human.humanCd)}">${f:h(human.attribute.fullName)}</a> 56 </c:forEach> 57</div> 58 59<!-- 画像一覧表示用div --> 60<div id="id2" class="class2" style="display:none"> 61 <c:forEach var="human" items="${humanList}" varStatus="status"> 62 <div class="test" style="width: 150px; text-align: center;"> 63 <%-- ※※※ここの表示がうまくいかない※※※ --%> 64 <%-- <img style="max-height: 150px; max-width: 150px;" 65 src="${f:url('/download/image')}?path=${f:u(human.photo)}" 66 alt="${f:h(human.attribute.fullName)}" /> --%> 67 <div> 68 </c:forEach> 69</div>

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

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

html

1<%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3<html> 4<head> 5<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6<title>ラジオボタンで画像切り替え</title> 7<script 8 src="https://code.jquery.com/jquery-1.12.4.min.js" 9 integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 10 crossorigin="anonymous"></script> 11<script> 12$(document).ready(function(){ 13 $("input").bind("click" ,function() { 14 val = $(this).val(); 15 16 imgPath = val.substring(0,val.indexOf(",")); 17 altValue = val.substring(val.indexOf(",") +1); 18 19 $("#targetImage").attr("src","images/" + imgPath); 20 $("#targetImage").attr("alt",altValue); 21 }) 22}); 23</script> 24</head> 25<body> 26<form name="form"> 27 <label for="radio1">1</label> 28 <input type="radio" id="radio1" name="picselect" value="1.jpg,alt1です" /> 29 30 <label for="radio2">2</label> 31 <input type="radio" id="radio2" name="picselect" value="2.jpg,alt2です" /> 32 33 <label for="radio3">3</label> 34 <input type="radio" id="radio3" name="picselect" value="3.jpg,alt3です" /> 35 36 <label for="radio4">4</label> 37 <input type="radio" id="radio4" name="picselect" value="4.jpg,alt4です" /> 38 39 <label for="radio5">5</label> 40 <input type="radio" id="radio5" name="picselect" value="5.jpg,alt5です" /> 41</form> 42<div id="imagebox"> 43 <img id="targetImage" alt="" src="images/1.jpg" /> 44</div> 45</body> 46</html>

投稿2016/11/10 04:46

A-pZ

総合スコア12011

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

投稿2016/11/10 02:36

aki178

総合スコア164

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Alice0225

2016/11/10 02:56

ご回答ありがとうございます。 表示・非表示のスクリプトに関しましては上記で記載しております通り、すでに実装されています。(画像だけでなくdiv単位で表示・非表示) 非表示状態でも裏では全て読み込み、表示のための準備をしているのでページ読み込み時に時間がかかってしまっている為、HTML記述から画像表示部を抜いておき、画像表示したい時だけHTML記述することで「リスト表示」時に不要な読み込み時間がかからないと思ったのですがそもそもその考えから違うということでしょうか…?
aki178

2016/11/10 03:09

いろいろ考えたのですが、単純に以下の結果(パス)は正しいでしょうか。 ${f:url('/download/image')}?path=${f:u(human.photo)}" ×になっているということはパスが正しくないと思いますので。。。
Alice0225

2016/11/10 03:11

パスは正常表示出来ているものから流用しているので正しい認識です。
aki178

2016/11/10 03: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して切り替えたほうがいいかもしれません。
Alice0225

2016/11/10 03:34

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

2016/11/10 04: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に渡す値に問題ないでしょうか。
guest

0

自己解決

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

投稿2016/11/18 02:24

Alice0225

総合スコア206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問