Save Modal Dialog Field Value to Refresh Page DIV

Question

I found a couple great functions that allow me to programmatically call up a modal edit form, and they work very well. What I'm looking for is a way to update a div on the calling page with the contents of the modal form's UserNote field once I click the Submit button.

function displayProgInfo(progId) {
  var options = SP.UI.$create_DialogOptions();
  options.resizable = 1;
  options.scroll = 1;
  options.title = "Update Program Information";
  options.url = "/address/_layouts/listform.aspx?PageType=6&ListId={[ListID]}&ID=" + progId;
  options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
  SP.UI.ModalDialog.showModalDialog(options);
}

function CloseCallback(result, target) {
  if (result != 0) {
    window.parent.location.href = window.location.href;
    // Replace the note after clicking save in the modal dialog
    htmlBuilder = "<div id='noteField'>" + [contents of UserNote field] + "</div>";
    $("#noteField").replaceWith(htmlBuilder);
  }
}

The hangup right now is how to capture and save the contents of the UserNote field before the form closes. The articles and questions I've found so far don't offer me much that I understand; can anyone provide an answer that helps in this situation?

Answer 1

On your edit form, you need to add the onclick handler for your Submit button and pass UserNote field's value as an argument.

Ex.

var userNoteFieldValue =  encodeURIComponent(document.getElementById(userNoteFieldId).value);
<input type="button" value="Submit" class="button" href="javascript:void(0);" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, {userNoteFieldArg: '" + userNoteFieldValue + "'});" />    

then on CloseCallback function, you can access the passed in argument(s).

CloseCallback = function(result, args) {
        if (result == SP.UI.DialogResult.OK) {
            document.getElementById("noteField").innerHTML = " " + decodeURIComponent(args.userNoteFieldArg);
        }
        if (result == SP.UI.DialogResult.cancel) {
            // Run Cancel Code
        }
    }

Alternate method:

function CloseCallback(result, args) {
    if (result == SP.UI.DialogResult.OK) {
        getListItemById(progId, 'YourListName')
    }
    if (result == SP.UI.DialogResult.cancel) {
        // Run Cancel Code
    }
}


function getListItemById(progId, listName) {
    var context = new SP.ClientContext.get_current();
    //var context = new SP.ClientContext('/siteUrlHere');
    var web = context.get_web();
    var list = web.get_lists().getByTitle(listName);
    var item = list.getItemById(progId);
    context.load(item, 'myUserNoteField');
    context.executeQueryAsync(
        function () {
            //success
            var userNoteField = item.get_item('myUserNoteField');
            $("#noteField").html(userNoteField); 

        }, function (sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }
    );
}