JQueryUI dialog close 오류 ( cannot call methods on dialog prior to initialization; attempted to call method 'close' )

 JQuery UI dialog method Error

JQEURY UI(JQuery User Interface)의 dialog 위젯에서 지원하는 메서드중 하나인 close를 이용하여 layer를 닫을때 아래와 같은 에러가 발생할 경우가 있습니다.

Uncaught Error: : cannot call methods on dialog prior to initialization; attempted to call method 'close'

케이스마다 원인이 다를 수 있지만 저같은 경우 사이트 구축 초기에는 잘 뜨고 소스 수정도 없었는데 어느 순간부터 에러가 발생하고 있어서 원인 찾는데 시간이 조금 걸렸었네요.

원인은 본문내에 dialog API를 이용하여 modal을 document로 append하는데 레이어내 html의 document에서 JQuery 라이브러리 스크립트들을 한 번 더 로딩하면서 발생하는 문제였습니다.

아마 dialog 위젯의 메서드를 사용하려면 initialization를 해줘야하는데 modal 팝업 안에서 스크립트가 다시 로딩되어 초기상태로 돌아가면서

본창에서 dialog initialization했던 데이터를 잃어버리는 현상이었던 걸로 예상됩니다.

Reference

https://jqueryui.com/dialog/

http://api.jqueryui.com/dialog/