Rendering html in a SharePoint Dialog requires a DOM element and not a String

Most of the examples of using dialogs in SharePoint refer to calling other pages, effectively creating a popup iframe. This approach is both useful and reasonably well documented (Charlie Holland’s blog has the best examples I’ve seen to date).

<script>

	function ShowDialog()
	{
		var options = {
			url: 'http://www.google.com',
			autoSize:true,
			allowMaximize:true,
			title: 'Test dialog',
			showClose: true,
		};
		var dialog = SP.UI.ModalDialog.showModalDialog(options);
	}

</script>

<a href="javascript:ShowDialog()">Boo</a>

What isn’t well documented is using SharePoint modal dialogs to render dynamically generated html. When you call SP.UI.ModalDialog.ShowModalDialog you need to pass in a SP.UI.DialogOptions object. Charlie kindly posted the list onto MSDN, but with regards to passing in html it’s incorrect. It seems to indicate that raw html can be passed in.

<script>

	function ShowDialog()
	{
		var htmlString = 'hello world';

		var options = {
			html: htmlString,
			autoSize:true,
			allowMaximize:true,
			title: 'Test dialog',
			showClose: true,
		};

		var dialog = SP.UI.ModalDialog.showModalDialog(options);
	}

</script>

<a href="javascript:ShowDialog()">Boo</a>

However if you try this you’ll just get an error like this:

Message: Object doesn't support this property or method
Line: 2
Char: 18225
Code: 0
URI: http:///_layouts/sp.ui.dialog.js?rev=IuXtJ2CrScK6oX4zOTTy%2BA%3D%3D

This is because the string that gets passed in is evaluated for nodeType (if you want to check for yourself, see around line 764 in SP.UI.Dialog.debug.js, there is a function that the html string is passed into with a definition that looks like $13_0: function($p0).

What this means is that you have to pass in a DOM element.

 

<script>

	function ShowDialog()
	{
		var htmlElement = document.createElement('p');

		var helloWorldNode = document.createTextNode('Hello world!');
		htmlElement.appendChild(helloWorldNode);

		var options = {
			html: htmlElement,
			autoSize:true,
			allowMaximize:true,
			title: 'Test dialog',
			showClose: true,
		};

		var dialog = SP.UI.ModalDialog.showModalDialog(options);
	}

</script>

<a href="javascript:ShowDialog()">Boo</a>

Do that, and you’ll get your dynamic-html dialog!