SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
up vote 28 down vote accepted

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
});
share|improve this answer
12  
Exactly. There is a mistake in msdn, and they are not even going to fix it. html is not a string, this is a DOM element. You can find evidence in comments to msdn article. Now I always read comments in msdn :). – Kai Jan 20 '12 at 12:16
    
Very important! If you want to make a non-trivial dialog (e.g form inputs) you may be tempted to define it in your html and reference it by id. This works one time only because a side-effect of showModalDialog deletes the DOM element! (such clever programmers at ms). If you want to open your dialog more than once, you must either create the element in code, or clone an existing element from the DOM. But beware because cloning will cause duplicate ids. – John Henckel Jun 28 at 14:15

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
 });
share|improve this answer

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.

share|improve this answer

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

share|improve this answer
2  
We require relevant answers and disclosure of any affiliation with products or websites. Please see May I promote products or websites I am affiliated with here? for guidelines. In addition, we prefer inclusion of the essential parts of the answer here, and to provide the link for reference - see how to answer for general guidelines. – SPDoctor Sep 21 '12 at 12:17
    
-1 dead link! @Benjamin – John Henckel Jun 28 at 14:08

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 )

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.