SP.UI.ModalDialog.showModalDialog() do not work under SharePoint 2013

Introduction

Have you ever tried using the SP.UI.ModalDialog.showModalDialog(options) in SharePoint 2013. I did and I discovered some strange behavior.

After migrating my code from the SharePoint 2010 to SharePoint 2013, the calls to the showModalDialog failed with a message that the method cannot be found (javascript). I checked it in the IE Developer Tools and somehow it wasn’t surprising at all; it said that the required js-file isn’t loaded.

But why? I guess it must be the new SOD-Model (Script on Demand) that got introduced in the SharePoint 2013.

SharePoint 2010 Example

function ShowServerInformation() {

var options = {

url: '/_layouts/Management/GeneralInformation.aspx',

tite: 'Management Information',

allowMaximize: false,

showClose: true,

width: 430,

height: 230

};

SP.UI.ModalDialog.showModalDialog(options);

return false;

}

It’s very easy to fix this problem.

  1. Remove the Java Script reference.
  2. <script src="/_layouts/sp.js" type="text/javascript"></script>
  3. <script src="/_layouts/SP.UI.Dialog.js" type="text/javascript"></script>
  4. Add to the url variable "?IsDlg=1"`
  5. Replace the command SP.UI.ModalDialog.showModalDialog() with the new command SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);

After making the changes your solution will work nicely.

SharePoint 2013 Example

function ShowServerInformation(featureId) {

var options = {

url: '/_layouts/Management/GeneralInformation.aspx?IsDlg=1',

tite: 'Management Information',

allowMaximize: false,

showClose: true,

width: 430,

height: 230

}

SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);

return false;

}

Notice: Initially I tried the “executeOrDelayUntilScriptLoaded”-function but it was of no help. It only “swallowed” my function call and never executed it, because the js-file, I specified, was never loaded.