Sharepoint - SharePoint Modal Help - pass value back to parent when closing

This is a good example.

Basically you create the Modal dialog like this:

//Dialog Opening
function OpenDialog() {
    var options = SP.UI.$create_DialogOptions();
    options.url = '/_layouts/mySolution/myPage.aspx';
    options.width = 500;
    options.height = 400;
    options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
    SP.UI.ModalDialog.showModalDialog(options);
}

and then make the return function like this:

// Dialog callback
function CloseCallback(result, target) {
    if (result == SP.UI.DialogResult.OK) {
        // Run OK Code
        // To be consistent with the below... 
        this.dataArray = target.split("^");
        var startDate = new Date(this.dataArray[1]);
        // Note that I use this.dataArray to allow the object to be accessed throughout the code
    }
    if (result == SP.UI.DialogResult.cancel) {
        // Run Cancel Code
    }
}

Editing to include more info!

For the code I've written, I have an aspx page that takes an ItemID, postbacks to retrieve list item data, and then sends back to the parent page the changes made for two Dates (or that it was cancelled). For now I'm just going to show the JavaScript that gets the ItemID and then returns the form values.

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript">
        function onEditTimeOffLoad() {
            var itemId = window.frameElement.dialogArgs;
            var pageId = '<%=Page.ClientID %>';
            __doPostBack(pageId, itemId);
        }

        function BtnEditTimeOffCancel_Click() {
            SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,'Cancelled clicked');
        }

        function BtnEditTimeOffOk_Click() {
            if(Page_ClientValidate())
            {
                var form = document.forms.<%SPHttpUtility.NoEncode(Form.ClientID,Response.Output);%>;
                var EmployeeName = form.<%SPHttpUtility.NoEncode(Employee.ClientID,Response.Output);%>.value;
                var startDate = document.getElementById('<%=DateStart.Controls[0].ClientID%>').value;
                var endDate = document.getElementById('<%=DateEnd.Controls[0].ClientID%>').value;
                var data = "" + EmployeeName + "^" + startDate + "^" + endDate;
                SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, data);
            }
        }
    </script>
</asp:Content>

Basically there's some supporting code behind that takes the ItemID from the EditTimeOffLoad and post backs to get info, which we are going to ignore assuming you don't need that part (so don't put in the __doPostBack!).

So say you now have the ItemID (not that it's helpful without the other code but whatever), and your user has completed filling out the form and hits 'OK'. The BtnEditTimeOffOk_Click() is naturally linked to an 'OK' button and will fire (after validation which in my case is SharePoint Webcontrols InputFormValidators).

I require 3 values in my case, and are handling them as strings and sending them back by simply concatenating them with a value I know will not show up in any of them. I pull the form object in order to get my EmployeeName textbox value, and getElementById to get the Dates. To be perfectly honest I do not remember why I did it that way, but it works :).

Finally with the string data properly concatenated I run the commonModalDialogClose and pull the data with the target variable from my CloseCallBack. (I needed to do target.split("^") to actually get the data I wanted.)


The previous answer (where some data are concatenated into string, returned to the parent page and then split into values) seems to be a bit complicated and even redundant. Because we always can return data to the parent page as

var returnValue = []; // array
returnValue[0] = 123;
returnValue[1] = 'hello';
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, returnValue);

or

var returnValue = { arg1: 123, arg2: 'hello' }; // object
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, returnValue);

So, the function dialogReturnValueCallback may look like

dialogReturnValueCallback:
      function (res, retVal) {
        if (res === SP.UI.DialogResult.OK) { 
            alert(retVal[0] + retval[1]);
            // or
            // alert(retVal.arg1 + retval.arg2);
        }        
      }  

Tags:

Modal Dialog