SP.UI.ModalDialog.showModalDialog using the html option

Question

http://msdn.microsoft.com/en-us/library/ff410058.aspx says that you can use the option html to display html text in a modal.

I have a string like this;

var html = '<div><strong>Test</strong> test</div>';

Passing this in as the html option causes the error:

Microsoft JScript runtime error: Object doesn't support property or method 'getElementsByTagName'

So you can't pass a string into the html element. How can I convert my string into a format that the html option likes?

The string is being dynamically created on the sever and is being retrived via a WCF REST web service

Answer 1

May not be the best wat but it works:

var test = "<div id='correspondence'>" + result + "</div>";
$('body').append(test);

SP.UI.ModalDialog.showModalDialog({
    html: document.getElementById('correspondence'),
    title: "Correspondence",
    allowMaximize: false,
    showClose: true,
    autoSize: true
});

Answer 2

Here's a better way than the code from John by using plain JavaScript (no need for jQuery) and without adding the element to the body manually:

var element = document.createElement('div');
element.innerHTML = 'Hello World, I am the dialog content';

SP.UI.ModalDialog.showModalDialog({
    html: element,
    title: 'My Dialog Title',
    allowMaximize: false,
    showClose: true,
    autoSize: true
 });

Answer 3

The html option takes a DOM element rather than a string because of which you get this error. Try something like this:

var htmlElement = document.createElement('p');
var messageNode = document.createTextNode('Message');
htmlElement.appendChild(messageNode);
var options = {
    html: htmlElement,
    autoSize: true,
    allowMaximize: true,
    title: 'Title',
    showClose: true,
};
var dialog = SP.UI.ModalDialog.showModalDialog(options);

The above code snippet has been taken from here.

Answer 4

As shortcut you can use sg like:

SP.UI.ModalDialog.showModalDialog( { html : $( "<h1>asdf</h1>" ).get( 0 ) } );

NOTE: if you have more than one tag you need to wrap everything into an embracing one otherwise only the first is shown:

$( "<div><h1>asdf</h1><p>jkl;</p></div>" ).get( 0 )

Answer 5

Here is a full example using jQuery : http://www.wawawum.com/blog/post/SharePoint-Modal-Dialog-from-HTML.aspx