1

Tried adding a Modal window but it just fails to work. The code itself works in a FormWebPart but not in a custom aspx page created via SPD.

Working Code in FormWP

<p><a href="javascript:portal_openModalDialog();">test link</a></p>
<script>
    function portal_openModalDialog() {
        var options = {    
            url: SP.Utilities.Utility.getLayoutsPageUrl('#' + location.href),    
            title: 'Edit web info',    
            allowMaximize: false,    
            showClose: true,    
            width: 800,    
            height: 330,    
            dialogReturnValueCallback: Function.createDelegate(null, 
                function (result, returnValue) {        
                    if (result == SP.UI.DialogResult.OK) {            
                        if (returnValue == null) {                
                            SP.UI.Notify.addNotification('Operation successful');                
                            SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);            
                        }            
                        else {                
                            location.href = returnValue;            
                        }        
                    }    
                }
            )
        }; 
        SP.UI.ModalDialog.showModalDialog(options);
    }
</script>

custom ASPX page code (not working)

<pre>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register tagprefix="WebPartPages" namespace="Microsoft.SharePoint.WebPartPages" assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>


<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 2</title>

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

</head>

<body>
<form id="form1" runat="server">
<p><a href="javascript:portal_openModalDialog();">test link</a></p>
<script>

function portal_openModalDialog() {
ExecuteOrDelayUntilScriptLoaded(function () {

var options = {    url: SP.Utilities.Utility.getLayoutsPageUrl('#' + location.href),    title: 'Edit web info',    allowMaximize: false,    showClose: true,    width: 800,    height: 330,    dialogReturnValueCallback: Function.createDelegate(null, function (result, returnValue) {        if (result == SP.UI.DialogResult.OK) {            if (returnValue == null) {                SP.UI.Notify.addNotification('Operation successful');                SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);            }            else {                location.href = returnValue;            }        }    })}; SP.UI.ModalDialog.showModalDialog(options);

}, "sp.js")


}
</script>

</form>

</body>

</html>
</pre>

Eventually I want the link to be part of a dataformwebpart that displays list items in a modal box.

Hope someone can assist.

Updated Code Almost working as can see box but also getting button stating 'Wrap focus to end of dialog'

<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register tagprefix="WebPartPages" namespace="Microsoft.SharePoint.WebPartPages" assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>


<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<meta name="WebPartPageExpansion" content="full" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 2</title>

<Sharepoint:ScriptLink runat="server" Name="SP.js" Localizable="false"  ID="s3" LoadAfterUI="true"/>
<Sharepoint:ScriptLink runat="server" Name="SP.Core.js" Localizable="false"  ID="s1" LoadAfterUI="true"/>
<Sharepoint:ScriptLink runat="server" Name="SP.Runtime.js" Localizable="false"  ID="s2" LoadAfterUI="true"/>
<Sharepoint:ScriptLink runat="server" Name="SP.UI.Dialog.js" Localizable="false"  ID="s4" LoadAfterUI="true"/>


</head>

<body>
<form id="form1" runat="server">
<p><a href="javascript:portal_openModalDialog();">test link</a></p>
<script>

function portal_openModalDialog() {
ExecuteOrDelayUntilScriptLoaded(function () {

var options = {    url: SP.Utilities.Utility.getLayoutsPageUrl('../_layouts/settings.aspx'),    title: 'Edit web info',    allowMaximize: false,    showClose: true,    width: 800,    height: 330,    dialogReturnValueCallback: Function.createDelegate(null, function (result, returnValue) {        if (result == SP.UI.DialogResult.OK) {            if (returnValue == null) {                SP.UI.Notify.addNotification('Operation successful');                SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);            }            else {                location.href = returnValue;            }        }    })}; SP.UI.ModalDialog.showModalDialog(options);

}, "sp.js")


}
</script>

</form>
</body>

</html>

</pre>
1

Add following to your custom page

<Sharepoint:ScriptLink ID="ScriptLink2" Name="sp.js" Localizable="false" runat="server"></Sharepoint:ScriptLink>
<Sharepoint:ScriptLink ID="ScriptLink1" Name="sp.ui.dialog.js" LoadAfterUI="true" Localizable="false" runat="server"></Sharepoint:ScriptLink>   
<SharePoint:FormDigest runat="server" />

Since user reported the above is not working. I am suggesting below code

<Sharepoint:ScriptLink runat="server" Name="SP.js" Localizable="false"  ID="s3" LoadAfterUI="true"/>
<Sharepoint:ScriptLink runat="server" Name="SP.Core.js" Localizable="false"  ID="s1" LoadAfterUI="true"/>
<Sharepoint:ScriptLink runat="server" Name="SP.Runtime.js" Localizable="false"  ID="s2" LoadAfterUI="true"/>
<Sharepoint:ScriptLink runat="server" Name="SP.UI.Dialog.js" Localizable="false"  ID="s4" LoadAfterUI="true"/>
  • Added code in head section. I now get an error Type.registerNamespace("SP") - Type not defined in the sp.runtime.js scripts – Raj Chahal Oct 31 '14 at 14:42
  • Can you update question with the new code – Amal Hashim Oct 31 '14 at 14:47
  • I've added the extra lines now I see a window but not rendering correctly. see message 'Wrap focus to end of dialog' in the browser also. – Raj Chahal Oct 31 '14 at 16:04
  • Hi When I add a master page to the aspx file, it strips out the head section (all the ScriptLink tags) but the dialog works. Could it be a css issue? – Raj Chahal Nov 3 '14 at 9:01
0

Added master page and it works.

  • 1
    Can you please add more details about what you did, and how? Your answer is not super helpful right now :) – Robert Lindgren Nov 10 '14 at 7:38
  • Adding something like this to the masterpage is a bad idea in most of the cases.. – Gwny Jan 12 '16 at 9:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.