SOD Model in SharePoint 2013

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.