SharePoint 2010: JavaScript error when creating Modal Dialog?

Question

For some reason, my SharePoint's modal dialog doesn't work properly. The error I get is this:

• In Firefox: SP.UI.$create_DialogOptions is not a function
• In IE: Object doesn't support this property or method

Here is my code:

var options = SP.UI.$create_DialogOptions();
options.width = 525;
options.height = 300;
options.url = '/_layouts/mywork/richtexteditor.aspx';
options.dialogReturnValueCallback = Function.createDelegate(null, function (result, value)
{
    alert(result + value);
});

SP.UI.ModalDialog.showModalDialog(options);

Interestingly, when I inspect the SP.UI in Firebug, I don't see all the methods and properties.

NOTE: I am using standard Webpart (not visual) and not an application page.

Solution 1

The problem is that the required SharePoint JavaScript "Library" hasn't been loaded. (The SharePoint 2010 JS is a good bit of a mess and namespaces/etc. come from all over -- the matter is further complicated with the new "on demand" loading).

The library that needs to be loaded to use SP2010 Modal Dialog interface (including the $create_DialogOptions and showModalDialog) is "sp.js".

To ensure "sp.js" is loaded:

ExecuteOrDelayUntilScriptLoaded(function () {
  // do modal dialog stuff in here (or in another function called from here, etc.)
}, "sp.js")

The call-back function is only invoked after "sp.js" (including the SP.UI.ModalDialog stuff) is guaranteed to be loaded (and it may never be called if there is a loading error).

This could also likely be solved with using a <ScriptLink> to sp.js with OnDemand specified, but I can't guarantee it: (I think there may have been issues with this approach, but I can't recall why it's not used in the project I just looked at.)

<SharePoint:ScriptLink runat="server" Name="sp.js" OnDemand="true" Localizable="false" />

See SPSOD for some more details/information.

Happy coding.

Solution 2

For me it worked like this: ExecuteOrDelayUntilScriptLoaded(function () {}, "sp.js")

and:

<SharePoint:ScriptLink ID="ScriptLink1" runat="server" Name="sp.js" 
    OnDemand="false" Localizable="false" LoadAfterUI="true"/>

Solution 3

Found that both Adela's and user166390's approaches fail in old IEs 7-8. Seems that page is not completely parsed and tried to be modified by dialog's iframe and this is bad for those IEs. For my case - I need to auto-popup dialog in application page - I fixed it with next

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <SharePoint:SPPageManager ID="SPPageManager1" runat="server" />
    <script type="text/javascript">
        var ShowDialog = function () {
            var options = {
                url: '/_login/default.aspx,
                title: 'Title, Description, and Icon',
                width: 640,
                height: 400,
                dialogReturnValueCallback: function(dialogResult, returnValue) {
                    window.location.replace(returnValue);
                }
            };

            SP.UI.ModalDialog.showModalDialog(options);
        };

        ExecuteOrDelayUntilScriptLoaded(ShowDialog, "sp.ui.dialog.js");
    </script>
</asp:Content>

This little thing

<SharePoint:SPPageManager ID="SPPageManager1" runat="server" />

registers all SP javascripts.

The approach was found on MSDN forums.

Comments

[Admin]

The appropriate SP "module" has not been loaded correctly. It is likely nonsense to do with the dynamic JS loading (and not being loaded at the time of invocation). See ilovesharepoint.com/2010/08/… for the gist of it.

[Moon]

The only reason we need to load it dynamically is that we need to show the popup on the click event of our grid's cell

[Admin]

@Ruby No, no, I mean the JavaScript that supplies the SP.UI.$create_DialogOptions is not loaded yet. SP2010 created a new mess with this "dynamic" JS stuff.

[Admin]

Make sure the dialog creations happen after whatever SP DOM "ready" event, as well -- you do have an OnDemand ScriptLink for "sp.js" in the layout, no?

[Admin]

P.S. Just use: var options = {...}, although this will just delay the error to the showModalDialog line. I'm not sure why $create_DialogOptions ever became so widely suggested...

[Moon]

@pst I used var options = {...} before... then it broke on: SP.UI.ModalDialog.showModalDialog(options);

[Moon]

Do you think its because I am using a standard Webpart and not an application page?

[Admin]

Something is definitely off then :(. There is no issue with a Webpart as long as the correct JS libraries are loaded.

[Admin]

@Ruby I see this answer was accepted -- did you end up fixing the problem and, if so (especially if it differed from above), how? :)

[Moon]

I don't want to sat browser caching issue because it doesn't make sense. But I will still say it!

[Admin]

@Ruby I can believe it. Glad it's "fixed".