30

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

  • Is it possible to use BOTH url and HTML? For instance, I want to get the Attach File dialogue but I also want to load some custom HTML to the modal since in my own modal I can't get the Attach File content to ONLY display what the modal displays... – MattE Oct 27 '17 at 18:35
36

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
});
  • 16
    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 :). – Sergei Sergeev Jan 20 '12 at 12:16
  • 5
    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 '16 at 14:15
  • What if I want to add SP datepicker in the modal? – Harsh Jun 26 '18 at 5:08
21

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
 });
6

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.

  • What if I want to add one SP datepicker in the modal? – Harsh Jun 26 '18 at 5:09
  • @Harsh Not sure. You shoukd ask a separate question for that. – Naveen Jun 26 '18 at 5:31
6

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 )

  • Only problem with this is that it creates a long heighten modal dialog – nbi Nov 28 '17 at 10:35
3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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