Sharepoint Troubleshooting: Using ‘html’ option in SP.UI.ModalDialog.showModalDialog

Issue

When trying to use SP.UI.ModalDialog.showModalDialog with html option using the below code:

1.var options = {
2.    title: "Title",
3.    width: 400,
4.    height: 600,
5.    html: "Content of dialog"
6.};
7.SP.UI.ModalDialog.showModalDialog(options);

Error

You get into this weird error:

Object doesn't support property or method 'getElementsByTagName'

sp.ui.dialog.js, line 2 character 21645

Solution

 

The reason for this error is that the ‘html’ option takes a DOM element rather than a string.  To use HTML option you need to write your code as:

01.var htmlElement = document.createElement("p");
02.var messageNode = document.createTextNode("Content of dialog");
03.htmlElement.appendChild(messageNode);
04. 
05.var options = {
06.    title: "Title",
07.    width: 400,
08.    height: 600,
09.    html: htmlElement
10.};
11.SP.UI.ModalDialog.showModalDialog(options);