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!

 

 

7 comments on “Rendering html in a SharePoint Dialog requires a DOM element and not a String

  1. This is the same solution I’ve used last week for creating a custom HTML form inside the modal dialog.

    It’s a pity Microsoft gave so little information.

  2. I think there is something wrong with your final source code, it’s showing html and style tags embedded in your code. Please update.

    Thanx!

  3. The source code is rendered using a plugin, so might not have worked for you, but I’ve been checking on different browsers and never seem to have a problem. Any chance you can let me know what browser (type and version) you’re using?

  4. var htmlElement.appendChild(helloWorldNode);

    should be

    htmlElement.appendChild(helloWorldNode);

    (without var)

    Thanks for the post, really useful

Leave a Reply

Your email address will not be published. Required fields are marked *