Tuesday, 11 August 2015

JQuery UI Dialog: Cannot call methods on dialog prior to initialization

My current project (using Angular JS on SharePoint 2010) requires a modal dialog window with some data passed between the different modules. We used dialog-service from GitHub, which is a great utility for this purpose.

All was great until I deployed the solution to a new environment. Suddently, my modal dialog stopped working and was complaining about 'initialization' issues.

I stepped through the code and found that the initialization code was being called and dialog.ref.is(':data(dialog)') was returning true. So what was different?

To cut a long story short, the culprit was the Document ID Service (which was enabled on the new environment). It was appending text to the HTML, which was causing all the problems.

Two solutions presented themselves:
1. Disable the feature (not likely) or
2. trim the appended text:

if (html.indexOf('<html xmlns:') >= 0)
   html = html.substring(0, html.indexOf('<html xmlns:')){
}

I chose the latter. Not the most elegant solution, but effective.