【JSP・JQuery・Bootstrap】遷移後に表示するタブを指定したい

発生している問題

Java・Servlet・JSPにて、ブラウザ上でDBを操作するプログラムを作成しています。
こちらのサイトを参考にタブメニューを実装し、ハッシュをURLに追加することで指定のタブに遷移するようにしたいのですが、デフォルトのタブが常に開く状態になっております。

↓例えば「http://localhost:8080/ServletFinalWork/student.jsp#regist」とURLを入力しても、デフォルトの「#search」のほうが表示されてしまう。

該当のソースコード

student.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script
	src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>生徒管理</title>
</head>
<body>

<script type="text/javascript">

	var hash = document.location.hash;

	if (hash) {
			$('.nav-tabs a[href="' + hash + '"]').tab('show');
		}
		$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
		  e.target // newly activated tab
		  e.relatedTarget // previous active tab
	});

</script>

	<jsp:include page="template/header.jsp" />

	<div class="container">

		<ul class="nav nav-tabs" id="myTab" role="tablist">
			<li class="nav-item"><a class="nav-link active" id="search-tab"
				data-toggle="tab" href="#search" role="tab" aria-controls="search" aria-selected="true">生徒検索</a></li>
			<li class="nav-item"><a class="nav-link" id="regist-tab"
				data-toggle="tab"  href="#regist" role="tab" aria-controls="regist" aria-selected="false">生徒登録</a></li>
		</ul>


		<div class="tab-content" id="myTabContent">

			<div class="tab-pane fade show active" id="search" role="tabpanel" aria-labelledby="search-tab">

			<!-- searchの内容記述  -->

			</div>

			<div id="regist" class="tab-pane fade" role="tabpanel" aria-labelledby="regist-tab">

			<!-- registの内容記述  -->

			</div>
		</div>
	</div>

</body>
</html>

20200909追記

storm3様のご回答により、URL直打ちでのタブ切り替えはできたのですが、
ServletにてgetRequestDispatcherを使って#registを指定してもアンカー部が無視された状態になってしまいます。
StudentEditServlet.java

request.getRequestDispatcher("student.jsp#regist").forward(request, response);

↓eclipseエラー

 こちらのサイトを拝見したところ、Servletでこのようにハッシュを指定して画面遷移することは難しいように見受けられました。
JavaScriptであればアンカー部指定の画面遷移が可能かと思いますが、内部処理自体はjavaで行っているため、
「値渡し自体はJavaで行いつつ、画面遷移部分のみJavaScriptに任せる」ということは可能なのでしょうか。
こちらの解決方法につきまして、ご教示いただけますと幸いです。

StudentBeans.java

//import省略
public class StudentBeans {

	private static String student_id;
	private static String student_name;
	private static String student_furigana;
	private static String school_year;
	private static String school_class;

	private static Connection conn = null;
	private static PreparedStatement ps = null;
	private static ResultSet result = null;

	static String user = "suser";
	static String password = "spass";
	static String url = "jdbc:mysql://localhost:3306/mydb?autoReconnect=true&useSSL=false";

	public StudentBeans(HttpServletRequest request) {
		setStudent_id(request.getParameter("student_id"));
		setStudent_name(request.getParameter("student_name"));
		setStudent_furigana(request.getParameter("student_furigana"));
		setSchool_year(request.getParameter("school_year"));
		setSchool_class(request.getParameter("school_class"));
	}

	public static String getStudent_id() {
		return student_id;
	}
	public static void setStudent_id(String student_id) {
		StudentBeans.student_id = student_id;
	}
	public String getStudent_name() {
		return student_name;
	}
	public static void setStudent_name(String student_name) {
		StudentBeans.student_name = student_name;
	}
	public String getStudent_furigana() {
		return student_furigana;
	}
	public static void setStudent_furigana(String student_furigana) {
		StudentBeans.student_furigana = student_furigana;
	}
	public String getSchool_year() {
		return school_year;
	}
	public static void setSchool_year(String school_year) {
		StudentBeans.school_year = school_year;
	}
	public String getSchool_class() {
		return school_class;
	}
	public static void setSchool_class(String school_class) {
		StudentBeans.school_class = school_class;
	}

	public boolean registData() {
		try {
			Class.forName("com.mysql.jdbc.Driver");
			conn = DriverManager.getConnection(url, user, password);

			if(student_id.equals("")) {//生徒ID自動採番
				String sql = "insert into student(student_name, student_furigana, school_year, school_class) values (?, ?, ?, ?)";
				ps = conn.prepareStatement(sql);
				ps.setString(1, student_name);
				ps.setString(2, student_furigana);
				ps.setInt(3, Integer.parseInt(school_year));
				ps.setInt(4, Integer.parseInt(school_class));
			} else {//生徒ID指定
				String sql = "insert into student(student_id, student_name, student_furigana, school_year, school_class) values (?, ?, ?, ?, ?)";
				ps = conn.prepareStatement(sql);
				ps.setInt(1, Integer.parseInt(student_id));
				ps.setString(2, student_name);
				ps.setString(3, student_furigana);
				ps.setInt(4, Integer.parseInt(school_year));
				ps.setInt(5, Integer.parseInt(school_class));
			}

			ps.executeUpdate();

			return true;

		} catch(Exception e) {
			e.printStackTrace();
			return false;
		} finally {
			if(conn != null) {
				try {
					conn.close();
				} catch (SQLException e) {
					e.printStackTrace();
					System.out.println("MySQLのクローズに失敗しました。");
				}
			}
		}

	}

	public static boolean isNumber(String val) {
		String regex = "\A[-]?[0-9]+\z";
		Pattern p = Pattern.compile(regex);
		Matcher m1 = p.matcher(val);
		return m1.find();
	}

	public boolean isFurigana(String student_furigana) {
		String regularExpression = "^[ァ-ヶー]+$";
		Pattern pattern = Pattern.compile(regularExpression);
        Matcher matcher = pattern.matcher(student_furigana);

        if(matcher.matches()) {
        	return true;
        } else {
        	return false;
        }
	}

}

StudentEditServlet.java

//import省略
public class StudentEditServlet extends HttpServlet{
	
	Connection conn = null;
	PreparedStatement ps = null;
	ResultSet result = null;]
	
	String user = "suser";
	String password = "spass";
	String url = "jdbc:mysql://localhost:3306/mydb?autoReconnect=true&useSSL=false";

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
		request.setCharacterEncoding("UTF-8");

		String status = "Success!";
		StudentBeans student = new StudentBeans(request);

		String student_id = request.getParameter("student_id");
		String student_name = request.getParameter("student_name");
		String student_furigana = request.getParameter("student_furigana");
		String school_year = request.getParameter("school_year");
		String school_class = request.getParameter("school_class");

		boolean exist_regist_err = false;
		String s_id_err = "生徒IDは半角数字で入力してください";
		String name_err = "名前が空白です";
		String furigana_err = "フリガナが空白です";
		String year_err = "学年が空白です";
		String class_err = "クラスが空白です";
		
		try {
			//エラーチェック
			if(!student_id.equals("") && !StudentBeans.isNumber(student_id)) {
				request.setAttribute("s_id_err", s_id_err);
				exist_regist_err = true;
			}
			if(student.getStudent_name().equals("")) {
				request.setAttribute("name_err", name_err);
				exist_regist_err = true;
			}
			if(student.getStudent_furigana().equals("")) {
				request.setAttribute("furigana_err", furigana_err);
				exist_regist_err = true;
			} else if(!student.isFurigana(student.getStudent_furigana())) {
				furigana_err = "フリガナは全角カナで入力してください";
				request.setAttribute("furigana_err", furigana_err);
				exist_regist_err = true;
			}
			if(student.getSchool_year().equals("")) {
				request.setAttribute("year_err", year_err);
				exist_regist_err = true;
			} else if(!student.isNumber(student.getSchool_year())) {
				year_err = "学年は半角数字で入力してください";
				request.setAttribute("year_err", year_err);
				exist_regist_err = true;
			}
			if(student.getSchool_class().equals("")) {
				request.setAttribute("class_err", class_err);
				exist_regist_err = true;
			} else if(!student.isNumber(student.getSchool_class())) {
				class_err = "クラスは半角数字で入力してください";
				request.setAttribute("class_err", class_err);
				exist_regist_err = true;
			}

			if(exist_regist_err) {
				request.setAttribute("student_id_regist", student_id);
				request.setAttribute("student_name_regist", student_name);
				request.setAttribute("student_furigana_regist", student_furigana);
				request.setAttribute("school_year_regist", school_year);
				request.setAttribute("school_class_regist", school_class);
				status = "Failed...";
			} else {
				if(student.registData() == false) {
					status = "Failed...";
				}
			}

			request.setAttribute("exist_regist_err", exist_regist_err);
			request.setAttribute("status", status);
			request.getRequestDispatcher("student.jsp").forward(request, response);
			
		} catch(Exception e) {
			e.printStackTrace();
		} finally {
			try {
				conn.close();
			} catch (SQLException e) {
				System.out.println("MySQLのクローズに失敗しました。");
			}
		}

	}

}

行動規範の内容に同意します

回答2件

ベストアンサー

フォワードは、リクエストされたURLを受けて出力する内容をフォワード先に委ねますが、ブラウザがリクエストしているURLは変更しません。

そのため、JavaScriptはJSPから出力されているHTMLで動作するものですから、現在実装されている内容ですと、リクエストしているURLでアクティブになるタブを切り替える動作になっていますので、これをサーブレットからの値に書き換えるよう変更します。

例：サーブレット

java
1import java.io.IOException;
2
3import javax.servlet.ServletException;
4import javax.servlet.annotation.WebServlet;
5import javax.servlet.http.HttpServlet;
6import javax.servlet.http.HttpServletRequest;
7import javax.servlet.http.HttpServletResponse;
8
9@WebServlet("/Tab")
10public class TabServlet extends HttpServlet {
11	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
12
13		request.setAttribute("focus", "#register");
14
15		request.getRequestDispatcher("tab.jsp").forward(request, response);
16	}
17
18}

リクエスト属性に focus の名前で、アクティブにするタブの名前を設定。

tab.jsp

html
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2    pageEncoding="UTF-8" isELIgnored="false"%>
3<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
4<!DOCTYPE html>
5<html>
6<head>
7<meta charset="UTF-8">
8<meta name="viewport" content="width=device-width,initial-scale=1">
9<link rel="stylesheet"
10    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
11<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
12<script
13    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
14<script
15    src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
16<script type="text/javascript">
17$(function () {
18 	var focus = '<c:out value="${focus}" />';
19 	$('.nav-tabs a[href="' + focus + '"]').tab('show');
20});
21</script>
22<body>
23	<div class="container">
24		<ul class="nav nav-tabs" id="myTab" role="tablist">
25			<li class="nav-item"><a class="nav-link" id="search-tab"
26				data-toggle="tab" href="#search" role="tab" aria-controls="search"
27				aria-selected="true">生徒検索</a></li>
28			<li class="nav-item"><a class="nav-link" id="register-tab"
29				data-toggle="tab" href="#register" role="tab"
30				aria-controls="register" aria-selected="false">生徒登録</a></li>
31		</ul>
32
33		<div class="tab-content" id="myTabContent">
34			<div class="tab-pane fade" id="search" role="tabpanel" aria-labelledby="search-tab">
35				<!-- searchの内容記述  -->
36				search
37			</div>
38
39			<div id="register" class="tab-pane fade" role="tabpanel" aria-labelledby="register-tab">
40				<!-- registerの内容記述  -->
41				register
42			</div>
43		</div>
44	</div>
45
46</body>
47</html>

JavaScript内の変数 focus にリクエスト属性から focus の値を取得。

なお、勝手ながら regist を register に変更しています
※registは正しい英単語ではありません

投稿2020/09/12 01:38

A-pZ

総合スコア12011

ysda

2020/09/14 01:04

丁寧なご回答いただきまして、誠にありがとうございます。 doPostメソッド内にアンカー部をセットする記述を加え、JSPにてJSTLを読み込み、該当の関数を記述することで実装できました。（一人で作っているとはいえ、命名についてはちょっと適当すぎました…。）

行動規範の内容に同意します

タブを切り替えるjsのロジックの実行タイミングを、HTMLの表示が終わったあとに実行すれば良いかと思います。

方法①　window.onloadを使ってHTMLの描画が終わったあとに実行するようにする

html
1<script type="text/javascript">
2	window.onload = function() {
3	    var hash = document.location.hash;
4
5	    if (hash) {
6	            $('.nav-tabs a[href="' + hash + '"]').tab('show');
7	        }
8	        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
9	          e.target // newly activated tab
10	          e.relatedTarget // previous active tab
11	    });
12	}
13</script>

方法②　jqueryで①と同じことをする（jqueryを使っているならこっちでコーディングするのが普通かと思います）

html
1<script type="text/javascript">
2	$(function() {
3	    var hash = document.location.hash;
4
5	    if (hash) {
6	            $('.nav-tabs a[href="' + hash + '"]').tab('show');
7	        }
8	        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
9	          e.target // newly activated tab
10	          e.relatedTarget // previous active tab
11	    });
12	});
13</script>