Calling the SP.UI.ModalDialog.showModalDialog method

Question

My SharePoint solution has a userControl that Register a js block

string getJS(string title, string htmlContent)
 {
     return (string.Format(@"
          ExecuteOrDelayUntilScriptLoaded(function () {{
                      var options = SP.UI.$create_DialogOptions();
                      options.title = '{0}';
                      options.html = '{1}';
                      options.autoSize = true;
                      options.showClose=true;
                      options.allowMaximize=false;
                      SP.UI.ModalDialog.showModalDialog(options);
            }}, 'sp.js');"
          , title, "<div>Blah blah</div>"));
  }

I have registered the sp.ui.dialog.js to make sure that this function is available

<Sharepoint:ScriptLink ID="slSAAuto" Name="sp.ui.dialog.js" LoadAfterUI="true" Localizable="false" runat="server"></Sharepoint:ScriptLink>

I register my JS block at run time

ScriptManager.RegisterClientScriptBlock(this.Page, typeof(Page), "popupOnPageLoad", getJS(title,htmlContent), true);

after page loads, i got a JS error

Uncaught TypeError: Object <div>Blah blah</div> has no method 'getElementsByTagName'

Where did i go wrong?

Answer 1

Just for starters, I think you have called the ExecuteOrDelayUntilScriptLoaded function in a wrong way.(You have given an extra set of curly braces for the function inside. Try this code:

string getJS(string title, string htmlContent)
 {
     return (string.Format(@"
          ExecuteOrDelayUntilScriptLoaded(function () {
                      var options = SP.UI.$create_DialogOptions();
                      options.title = '{0}';
                      options.html = '{1}';
                      options.autoSize = true;
                      options.showClose=true;
                      options.allowMaximize=false;
                      SP.UI.ModalDialog.showModalDialog(options);
            }, 'sp.js');"
          , title, "<div>Blah blah</div>"));
  }

UPDATE:

Also, options.html needs a valid DOM element. You are passing a string containing <div>Blah Blah</div> right now.

It should be done like this:

var divElem = document.createElement('div');
divElem.innerHTML = 'Blah Blah';

//Rest of your Code.

options.html = divElem;