SharePoint 2010: JavaScript error when creating Modal Dialog?

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.

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.

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

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.

You can fix this issue by using a generic object for option instead of the DialogOptions class. that mean you have to write option like this:

//Using a generic object.
var options = {
    title: "My Dialog Title",
    width: 400,
    height: 600,
    url: "/_layouts/DialogPage.aspx" };

for more information about using it, visit: http://msdn.microsoft.com/en-us/library/ff410058%28v=office.14%29.aspx and see the example.