Closing a modal dialog using a custom form

Question

I am using some JavaScript (Client OM) code to open a dialog. Here's a snippet:

    function OpenModalForm() {

    //snip

    var opt = {
        url: url,
        width: 800,
        height: 600,
        title: title || "",
        dialogReturnValueCallback: OnDialogClose
    };

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

    function OnDialogClose(dialogResult, returnValue) {
    alert("dialog result: " + dialogResult );

    if ( dialogResult == SP.UI.DialogResult.OK ) {
        SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK);
    }
    if ( dialogResult == SP.UI.DialogResult.cancel ) {
        SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel);
    }
}

This dialog opens a custom form. The problem is the callback is not fired when pressing save or cancel. The callback is fired if I click the upper-right hand X of the modal. How do I get the call back to fire when clicking the buttons on the custom form?

Note Everything works as expected on OOTB forms. I have hard coded the custom form buttons to run the commonModalDialogClose and that works. I'm trying to not do that. I'd like to take advantage of the callback, if at all possible.

Update This is the HTML rendered for the buttons:

<TABLE border=0 cellSpacing=0 cellPadding=4 width="100%" xmlns:ddwrt2="urn:frontpage:internal" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:x="http://www.w3.org/2001/XMLSchema">
<TBODY>
    <TR>
        <TD class=ms-vb noWrap><INPUT onclick="javascript: __doPostBack('ctl00$***SNIP***','__commit')" name=btnSave value=Save type=button jQuery16406037463754413849="2"></TD>
        <TD class=ms-vb width="99%" noWrap><INPUT onclick="javascript: __doPostBack('ctl00$***SNIP***','__cancel')" name=btnCancel value=Cancel type=button jQuery16406037463754413849="1"></TD>
    </TR>
</TBODY>

Answer 1

Tried using the same controls that OOTB modal dialog forms use? You'll probably need to, as those will trip javascript functions needed for the callback.

Answer 2

I was looking at the same challenge a couple of months back. Project ended up being cancelled but would the section of this post: http://www.chakkaradeep.com/post/Using-the-SharePoint-2010-Modal-Dialog.aspx help in any way?

this.Page.Response.Clear(); 
this.Page.Response.Write("<script type=\"text/javascript\">window.frameElement.commonModalDialogClose(1, 1);</script>"); 
this.Page.Response.End();

There is another post with an example: http://blogs.msdn.com/b/chaks/archive/2011/09/14/modal-dialog-box-in-sharepoint-sandbox.aspx

Answer 3

After looking into it, there are two ways of creating a custom form. One via the ribbon and one from the Data Source Details pane. The first way produces controls with code similar to:

<td class="ms-toolbar" nowrap="nowrap">
    <SharePoint:SaveButton runat="server" ControlMode="Edit" id="savebutton2"/>
</td>
<td class="ms-separator"> </td>
<td class="ms-toolbar" nowrap="nowrap" align="right">
    <SharePoint:GoBackButton runat="server" ControlMode="Edit" id="gobackbutton2"/>
</td>

The second way of creating a custom form produces code similar to:

<td nowrap="nowrap" class="ms-vb">
    <input type="button" value="Save" name="btnSave" onclick="javascript: {ddwrt:GenFireServerEvent('__commit')}" />
</td>
<td nowrap="nowrap" class="ms-vb" width="99%">
    <input type="button" value="Cancel" name="btnCancel" onclick="javascript: {ddwrt:GenFireServerEvent('__cancel')}" />
</td>

Using the latter, you lose control of firing the callback. So the fix is to change the code to use the SharePoint control and not rely on the ddwrt:GenFireServerEvent. This will fire the callback as intended.

Answer 4

How about something like this: onclick=”window.frameElement.commitPopup(); return false;”