ShowModalDialog from Sharepoint hosted app not working

sharepoint.stackexchange https://sharepoint.stackexchange.com//questions/92330

Question

I'm having the same issue like in multiple other discussions:

Chrome: Cannot read property 'defaultDialogWidth' of undefined

Firefox: SP.Res is undefined

https://sharepoint.stackexchange.com/posts/76044 http://social.msdn.microsoft.com/Forums/sharepoint/en-US/bf1dc5ea-c045-48f6-b0cd-144d0ab7c1ce/spreshiddenbuttonvaluebeforedialog-is-null-or-not-an-object?forum=sharepointdevelopmentprevious http://chuvash.eu/2012/02/13/scriptresx-ashx-in-sharepoint/

I have tried various solutions posted online but none seem to work. Can anyone tell me which dependencies I'm missing? (I'm not using a masterpage)

I have the following code:

    function showTimeSheetLinesDialog(guid) {
        var options = {};
        options.width = 500;
        options.height = 640;
        //options.url = getQueryStringParameter('SPAppWebUrl') + '/Pages/TimeSheetLineDetail.aspx?guid=' + guid + '&json=' + $("#" + guid).attr('data-lines');
        options.title = 'Dialog title';
        options.allowMaximize = false;
        options.showClose = true;

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


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

}

And the following scripts loaded:

 <head>
    <base target="_parent" />
    <title></title>
    <script type="text/javascript" src="/_layouts/15/init.js"></script>
    <script type="text/javascript" src="../Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.debug.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.debug.js"></script>
    <script type="text/javascript" src="/_layouts/15/ps.debug.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.ui.dialog.js"></script>
    <script type="text/javascript" src="../Scripts/moment.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.init.js"></script>
    <script src="/_layouts/15/ScriptResx.ashx?culture=nb-no&name=SP.Res"></script>


    <link href="../Content/bootstrap.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="../Scripts/Warning.js"></script>
</head>
Was it helpful?

Solution

I eventually found the missing dependencies myself, incase anyone ever runs into the same problem, they are the following:

 <script type="text/javascript" src="/_layouts/15/ScriptResx.ashx?culture=en%2Dus&name=SP%2ERes"></script>


<script type="text/javascript">
    'use strict';

    // Set the style of the client web part page to be consistent with the host web.
    (function () {
        var hostUrl = '';
        if (document.URL.indexOf('?') != -1) {
            var params = document.URL.split('?')[1].split('&');
            for (var i = 0; i < params.length; i++) {
                var p = decodeURIComponent(params[i]);
                if (/^SPHostUrl=/i.test(p)) {
                    hostUrl = p.split('=')[1];
                    document.write('<link rel="stylesheet" href="' + hostUrl + '/_layouts/15/defaultcss.ashx" />');
                    break;
                }
            }
        }
        if (hostUrl == '') {
            document.write('<link rel="stylesheet" href="/_layouts/15/1033/styles/themable/corev15.css" />');
        }
    })();

OTHER TIPS

Have you checked this link ?

http://social.msdn.microsoft.com/Forums/sharepoint/en-US/c3666ce1-e326-4dc2-aa58-20ade46b2cce/open-a-page-in-modal-dialog-from-sharepoint-hosted-app-or-auto-hosted-app?forum=appsforsharepoint

It mentions this:

The web page that hosts your app must have the following:

<WebPartPages:AllowFraming ID="AllowFraming1" runat="server" />

Add _ribbon = new Object(); after sp.ui.dialog.js script loaded.

Example:

<script type="text/javascript" src="/_layouts/15/sp.ui.dialog.js"></script>

<script type="text/javascript">

    _ribbon = new Object();

</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top