(jQuery) Uncaught Error: cannot call methods on dialog prior to initialization

Uncaught Error: cannot call methods on dialog prior to initialization

jQuery로 작업을 하다가 위와 같은 에러를 만나서 엄청 고생을 했다. 

천천히 잘 읽어보면, 초기화되지 않은 상태로 호출을 하여 문제가 되는 것이다.

이는 다양한 상황에서 발생할 수 있는 문제이다. 예를 들면 다이얼로그가 존재하지도 않는데 open() 이나 close() 를 호출한다던가..

관련된 포스트가 있어서 인용한다. : (출처 : http://hbs.pe.kr/50152021782)

기다리던 jQueryUI 1.9 가 업데이트 되었습니다.

grid 가 제외되어서 안타깝습니다만..

어쨌든 개발중 1.9를 적용해 보고 발생하는 오류 포인트에 대해 간단히 정리합니다.

저의 경우 1.8.24 에서 1.9 로 올라갔기 때문에 정확히 1.9의 변경사항에만 영향이 있었습니다.

 

jQueryUI 1.8

        $('<div/>').dialog('close');

        오류 없음

 

        jQueryUI 1.9

        $('<div/>').dialog('close');

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

 

위처럼 간단히 오류 재현코드를 작성해 보았습니다.

포인트는 아래와 같습니다.

1. jQueryUI 1.9 이전에는 UI Plugin이 initialize 되지 않은 객체에 실행되면 그냥 무시 되었습니다.

2. jQueryUI 1.9 에서는 initialize 되지 않은 플러그인 관련 옵션/메소드를 사용할 경우 오류가 발생 합니다.

 

제가 발견한 포인트는 다음과 같습니다.

1. Dialog가 생성되기 전에 close 부터 하는 경우. (dialog가 있으면 close, 없어도 무시였으나 이제는 오류가 발생)

2. Div 밑에 children button의 icon을 변경하는 경우
div.children().button('option','icons',{primary:'ui-icon-close'});
children에 버튼이 아닌 객체가 포함되어 있다면 1.8에서는 문제 없으나 1.9에서는 오류 발생
따라서 children('BUTTON') 등으로 대상을 정확히 특정 하는 것이 좋고 더 좋은건 selector 의존을 줄이고 memoization을 활용 하면 됩니다.

 

특히 위 포인트의 2번째는 본인의 코드가 아닌 플러그인이나 프레임웍 등에 의해 하위 객체 구성이 바뀌는 경우 children이나 find를통한 chaining에서 문제가 클 수 있습니다.

[출처] jQueryUI 1.9 주의사항, 오류포인트|작성자 흡스

근데 난 jQueryUI 1.10 을 사용 중인데 이런 에러가 나는 걸 보니 꼭 위의 포스트처럼 1.9 버젼에만 국한된 이슈가 아닌 것 같다.

나는 Ajax로 다이얼로그에서 다른 페이지를 load() 할 때 이 문제를 만났는데, 온갖 삽질 끝에 불러오는 페이지에 있는 include 되는 모든 스크립트를 제거하고 시도한 끝에 해결할 수 있었다. 페이지가 순수하게 내가 의도한 데이터만 들어와야하는데, 페이지에 포함되어 있는 불필요한 스크립트 등이 함께 불러와져서 문제가 발생한 것이다.

천천히 소스를 검토해보고, 하나씩 테스트해봐가며 문제를 찾아보면 어렵지 않게 해결할 수 있는 문제다.

정작 나는 거의 5시간을 소비해버리고 말았지만..;; -_-;