Springboot에서 .load로 모달 구현할 때 클릭시 닫힘 문제

Question

카페 키오스크 화면을 구현한 프로젝트입니다.멤버십 회원 조회를 위해 휴대폰 번호를 입력받는 기능을 구현하는 도중에.onenumber의 버튼이 클릭되면 .load()로 모달을 구현했던 #mshipModal이 닫혀버립니다..!그나마 추측되는 이유는 컨트롤러를 지나 다시 redirect 됐을 때 새로고침이 되기 떄문일까요?도움을 주세요..!!!orderCheck.jsp<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ include file="../include/header.jsp" %>findMembership.jsp<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>order.js$(document).ready(function(){// 멤버십 번호 입력 코드$('.onenumber').click(function(event){var buttonValue = $(this).val();// ㄴ 클릭한 버튼의 값을 가져오기var selectTel2 = $('input[name="tel2"]');// ㄴ 번호 입력 input 태그 선택var nowTel2Val = selectTel2.val();// ㄴ 현재 번호 입력 input 태그 값 가져오기selectTel2.val(nowTel2Val + buttonValue);// ㄴ 현재 번호 입력 input 태그 값에 클릭한 버튼 값을 문자열 연결 시킴$.ajax({type: 'POST',url: '/updateTel2',data: {tel2Value: selectTel2.val()},success: function(res){console.log("번호 전송 성공");// 페이지 리로드window.location.reload();},error: function(xht, sts, err){console.log("번호 전송 실패 : " + err);}});event.preventDefault();return false;});// 멤버십 번호 backspace 코드$('#deleteNum').click(function(event){var selectTel2 = $('input[name="tel2"]');// ㄴ 번호 입력 input 태그 선택var nowTel2Val = selectTel2.val();// ㄴ 현재 번호 입력 input 태그 값 가져오기var deleteValue = nowTel2Val.slice(0, -1);// ㄴ 현재 번호 입력 input 태그 값의 제일 끝 문자열 제거selectTel2.val(deleteValue);// ㄴ 삭제된 새로운 번호 값으로 번호 입력 input 태그 값 설정$.ajax({type: 'POST',url:'/updateTel2',data: {tel2Value: selectTel2.val()},success: function(res){console.log("번호 삭제 성공");window.location.reload();},error: function(xhr, sts, err){console.log("번호 삭제 실패 : " + err);}});event.preventDefault();return false;});});OrderController.java@GetMapping("/findMembership")public String findMembership() {return "order/findMembership";}@PostMapping("/updateTel2")public String updateTel2(@RequestParam("tel2Value") String tel2Value,Model model) {System.out.println("tel2Value : " + tel2Value);model.addAttribute("tel2Value", tel2Value);return "redirect:/findMembership";}

charlatan · Answer

1.데이터를 $.ajax()로 보낸다는 것은 화면 리로드없이 어떤 데이터를 받아오기 위한 목적으로 사용하는 것이 대부분입니다. 따라서 $.ajax() 성공 콜백에서 window.location.reload() 하는 것은 통상적인 흐름상 뭔가 이상합니다.2.$.ajax()로 /updateTel2에 요청을 보내는 것으로 보입니다. 그런데 거기서 redirect:/findMembership를 합니다. redirect:는 서버가 브라우저에게 /findMembership으로 요청을 다시 보내라고 지시하는 것입니다. 따라서 브라우저가 요청을 다시 하기 때문에 현재 페이지, 아마 findMembership.jsp 같은데 그 페이지가 다시 리프레시될 것 같습니다.그러니까 이러나저러나 페이지가 새로고침 되므로 현재 페이지에 있던 화면 요소들, mshipModal 포함해서 전부 사라지지 않을까 싶네요?

Springboot에서 .load로 모달 구현할 때 클릭시 닫힘 문제

1개의 답변

#modal 목록