[Javascript / JSP] 팝업창 load시 외부 script 소스 파일 참조 안 될 때 해결하기(feat. datepicker)

프로젝트를 진행하다보면 datepicker를 사용하게 되는 경우가 많다.

그런데 기본 페이지를 사용할 때는 문제없던 datepicker가, 팝업창에서 사용하려고 하면 먹통이 되는 경우가 곧잘 발생하곤 한다. 여러가지 문제가 있겠지만, 협업을 진행하는 프로젝트 사양을 다 정확하게 파악하고 해결하기란 쉽지 않다.

 

그래서, 오늘은 팝업창 내에 외부 script 파일이 참조 되지 않거나 불러올 수 없어 해결이 되지 않을 때, 쉽게 해결할 수 있는 방법을 공유하고자 한다. 예시는 datepicker 이지만 모든 외부 스크립트 참조에 해당하는 사항이니 유사한 문제면 다 해결할 수 있을 것이다.

 

 

[ 해결 방법 ]

 

일단 기본 상황은 다음과 같다.

 

<!-- MainPage JSP -->

<!-- JQUERY -->
<script src="/js/jquery/jquery-3.3.1.min.js"></script>
<!-- datepicker 관련 CSS -->
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.min.css"  media="all" />
<!-- datepicker 관련 JS -->
<script type="text/javascript" src="js/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery/jquery_calendar_set.js"></script>
<!-- 사용자 생성 JS -->
<script src="/js/test.js"></script>

 

위처럼 기본 페이지 JSP에 각종 스크립트와 css가 참조되어 있는 상태이다.

 

실제 팝업창은 기본 페이지에 종속되기 때문에, 팝업창에서 외부 스크립트가 참조되지 않는다고 팝업창에서 다시 외부 스크립트를 참조하는 방식으로 해결하려고 하면, 기본 페이지와 중첩되어 문제가 발생한다.

 

그렇다고 팝업창에서만 로드하려고 하면, 최초 1회만 로드되어 이후에 동작하지 않는 문제나 기본 페이지에서는 사용할 수 없게 되는 문제가 발생한다.

 

 

어떻게 하면 될까?

 

반응형

 

방법은 Javascript에 있다.

필자는 편의상 팝업창을 생성하기 위해서, 기본 페이지에 div를 생성하고 해당 div에 JQuery의 load 를 사용하여 JSP를 불러오도록 구현한다.

 

JQuery의 load는 3개의 파라미터를 전송할 수 있다.
- 1번째는 요청 주소 [필수]
- 2번째는 전달할 데이터 [선택]
- 3번째는 요청 완료 시 실행되는 콜백 함수 [선택]

 

▼ 자세한 내용은 아래 JQuery 공식 문서 참조

.load() | jQuery API Documentation

 

여기서 해결방법은, 바로 3번째 콜백함수를 이용하는 것이다.

콜백함수 파라미터에 getScript를 통해 로드하고 싶은 외부 스크립트 파일을 가져오는 함수를 작성하면, 팝업창을 열 때마다 스크립트 파일을 지속적으로 가져올 수 있다.

 

코드는 아래와 같다.

 

<!-- MainPage JSP -->
<div id="popupDiv"></div>

<!-- Javascript -->
$("#popupDiv").load( "/{Controller 요청 주소}", {전달할 데이터}, function(){$.getScript("js/jquery/jquery_calendar_set.js");} );

 

여기서 function(){$.getScript({참조할 스크립트 location});} 부분이 콜백함수 이며, 여러개의 스크립트를 참조해야한다면, 따로 메소드를 작성해 넣어주든지, function 안에 getScript를 여러 개 넣는 방식으로 해결할 수 있을 것이다.

 

아무튼, 위와 같이 코드를 작성하면 팝업창 로드 시 외부 스크립트가 참조되지 않아 먹통이 되는 문제를 해결할 수 있다!

 

🤞 도움이 되셨기를 바랍니다. 한 번의 클릭과 댓글은 어딘가의 누군가에게 진실로 큰 힘이 됩니다. 🐱‍🏍