Zenn
🙌

子ウィンドウで検索して親ウィンドウ画面で表示する

2023/10/29に公開
#
検索
JSP
#
サーブレット
#
子ウィンドウ
#
親ウィンドウ
tech

はじめに

検索画面を作成中ですが、
子ウィンドウを検索画面として作成して、検索結果を親ウィンドウで表示する機能を実装したい。
ただ、同様の記事が少なかったため、作るのに難渋したため、備忘録として残しておく。

この記事でわかること

  1. 子ウィンドウで検索して親ウィンドウ画面で表示する機能の実装方法。

完成イメージ

手順

親ウィンドウ(jsp)を用意

indexQuestion.jsp

子ウィンドウ(サーブレット)を用意

SearchServlet.java

子ウィンドウ(jsp)を用意

search.jsp

まとめ

最後に、やったことをイメージでまとめますね。
こんなイメージです。

メソッドA

コード

indexQuestion.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>質問一覧</title>
    <style>割愛</style>
</head>
<body>
<script>
	function openWindow() {
	    window.open('Search', '小窓', 'width=400,height=300');
	}
	
	function handleDataFromChild(textValue) {
		const form = document.createElement('form');
	    
	    // formの基本設定
	    form.method = 'POST';
	    form.action = '/KnowledgeGarden/Search';
	    form.style.display = 'none';
	    
	    // hiddenのinput要素を作成して、受け取ったtextValueを値として設定
	    const input = document.createElement('input');
	    input.type = 'hidden';
	    input.name = 'searchTerm';
	    input.value = textValue;
	    
	    // inputをformに追加
	    form.appendChild(input);
	    
	    // formをページに追加
	    document.body.appendChild(form);
	    
	    // formを自動的に送信
	    form.submit();
	}

</script>
    <div class="container">
        <a href="Logout" class="logout-link">ログアウト</a>
        <h2>質問一覧</h2>
        
        <form action="Search" method="POST" class="search-form">
            <input type="text" name="searchTerm" placeholder="質問を検索" class="search-input">
            <button type="submit" class="search-button">検索</button>
            <button type="button" onclick="window.location.href = 'IndexQuestion'" class="styled-button">全てを表示</button>
        </form>
        <table class="styled-table">
            <thead>
                <tr>
                    <th class="small-column">No.</th>
                    <th>質問</th>
                    <th class="small-column">質問者</th>
                </tr>
            </thead>
            <tbody>
                <c:forEach var="question" items="${questions}" varStatus="loop">
                    <tr>
                        <td>${loop.index + 1}</td>
                        <td><a href="ShowQuestion?id=${question.id}">${question.title}</a></td>
                        <td class="small-column">${question.user.name}</td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
        <div class="button-container">
             <button type="button" onclick="window.location.href = 'CreateQuestion'" class="styled-button">新しい質問を作成</button>
            <button type="button" class="styled-button" onclick="openWindow()">検索</button>
        </div>
    </div>
</body>
</html>

SearchServlet.java

package servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import dao.SearchDAO;
import model.Question;
/**
 * Servlet implementation class SearchServlet
 */
@WebServlet("/Search")
public class SearchServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
 	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8");
		//文字化け対策した上で変数セット
     
		RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/jsp/search.jsp");
		dispatcher.forward(request, response);
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		//文字化け対策した上で変数セット
		String questionTitle  = request.getParameter("searchTerm");
		SearchDAO dao = new SearchDAO();
        
        List<Question> logic = dao.searchQuestions(questionTitle);
        for(Question logics: logic) {
        	System.out.println(logics.getTitle());
        }
        request.setAttribute("questions", logic);
        RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/jsp/indexQuestion.jsp");
		dispatcher.forward(request, response);
	}
}

search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <script>
  function sendData() {
	    const textValue = document.getElementById('searchTerm').value;
	    window.opener.handleDataFromChild(textValue);
	    window.close();
  }
  </script>
</head>
<body>
  <input type="text" id="searchTerm" name="searchTerm">
  <button onclick="sendData()">検索</button>
</body>
</html>

Discussion