elevne's Study Note

팝업에서 수정/삭제 기능 넣었을 때 본문

Frontend/JS & React

팝업에서 수정/삭제 기능 넣었을 때

elevne 2022. 10. 8. 21:52

게시판 기능 구현 중 window.open을 통해 팝업으로 상세창을 띄워서 수정하는 기능을 넣고 있었음.

수정기능은 ajax를 사용해서 전부 다 성공적으로 마치게되면 window.close()를 통해 손쉽게 닫히게 했었으나

삭제의 경우에는 ajax를 사용하지 않고 form을 post로 받아서 Controller단에서 다른 페이지로 넘어가게 하는 상황..이었음(사실 ajax를 사용해서 해도 상관없었을 것 같기는 함. 페이지가 너무 복잡해져서 사용하지 않은듯..?)

 

 

 

이 때 Controller에서 다른 페이지로 넘어가서 보여지는 것이 아니라 삭제를 성공적으로 마치면 창이 닫히면서 기존 게시판 리스트 창이 Refresh 되기를 원했음. 너무 간단하지만...

 

 

 

우선 Controller에서 기존에 만들어둔 페이지가 아니라, 새로운 빈 페이지(정확하게 말하면 script만 있는 페이지)를 만들어서 그 페이지로 옮겨지도록 함. 새로운 페이지(pageForDeleteAction.html)의 script를 다음과 같이 작성함...

 

 

 

$(document).read(()=>{
    opener.location.reload();
    window.close();
});

 

 

 

팝업창에서 다른 페이지로 넘어갔을 때도 opener이 잘 작동하는지 몰랐었는데 잘 됐음. location.reload로 기존 창을 Refresh하여 게시글이 삭제된 것을 반영한 리스트를 보여주고 팝업을 닫는 순서로 작성함.