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.

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 http://www.ilovesharepoint.com/2010/08/sharepoint-scripts-on-demand-spsod.html for the gist of it. — , Jun 07 '11 at 23:42
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 — Moon, Jun 07 '11 at 23:44
@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. — , Jun 07 '11 at 23:46
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? — , Jun 07 '11 at 23:47
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... — , Jun 07 '11 at 23:54
@pst I used `var options = {...}` before... then it broke on: `SP.UI.ModalDialog.showModalDialog(options);` — Moon, Jun 07 '11 at 23:58
Do you think its because I am using a standard Webpart and not an application page? — Moon, Jun 07 '11 at 23:58

score 16 · Accepted Answer · 2011-06-08T04:12:40.243

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.

Something is definitely off then :(. There is no issue with a Webpart as long as the correct JS libraries are loaded. — , Jun 08 '11 at 23:09
@Ruby I see this answer was accepted -- did you end up fixing the problem and, if so (especially if it differed from above), how? :) — , Jun 17 '11 at 03:50
I don't want to sat browser caching issue because it doesn't make sense. But I will still say it! — Moon, Jun 17 '11 at 05:42

score 2 · Answer 2 · edited Apr 24 '13 at 13:08

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

edited Apr 24 '13 at 13:08

shyam

9,134
4
29
44

answered Apr 24 '13 at 12:45

Adela

21
2

score 1 · Answer 3 · answered Sep 09 '13 at 08:59

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.

score 0 · Answer 4 · answered Nov 12 '13 at 16:19

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.

SharePoint 2010: JavaScript error when creating Modal Dialog?

4 Answers4