TypeError: this.$E_0.getElementsByTagName is not a function

Question

I am attempting to create a modal dialog in sharepoint 2010, but I'm getting this error:

TypeError: this.$E_0.getElementsByTagName is not a function

my code is:

var options = SP.UI.$create_DialogOptions();
options.html = '<div class="ExternalClass23FFBC76391C4EA5A86FC05D3D9A1904"><p>RedConnect is now available.​</p></div>';
options.width = 700;
options.height = 700;
SP.UI.ModalDialog.showModalDialog(options);

using firebug, i tried simply using the url field instead of the html field and it gave no error.

also related to this, what does SP.UI.$create_DialogOptions() actually do? what is the difference between using it and simply using a dict of values for your options?

Answer 1

options.html requires a HTML DOM element instead of plain HTML code:

<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>

Example code taken from the blog post Rendering html in a SharePoint Dialog requires a DOM element and not a String.

also related to this, what does SP.UI.$create_DialogOptions() actually do? what is the difference between using it and simply using a dict of values for your options

When you look at the definition of the SP.UI.DialogOptions "class" in the file SP.UI.Dialog.debug.js you see that its a empty javascript function.

SP.UI.DialogOptions = function() {}
SP.UI.$create_DialogOptions = function() {ULSTYE:;
    return new SP.UI.DialogOptions();
}

My guess is that it is there for client diagnostic purpose. Take a look at this SO question: What does this Javascript code do?