Grails non null params reaching controller as null?

Question

I am having some trouble trying to get params from my GSP to my controller from a Javascript click handler that looks like this:

$('#save').click(function () { 
        var uniqueId = "${recordToEdit.uniqueId}";
        var secondaryId = "${recordToEdit.secondaryId}";
        console.log(removedYellowIssues);
        <g:remoteFunction controller="customer" 
                            action="saveModifiedIndividualRecord"
                            params='{uniqueId: uniqueId, 
                                    secondaryId: secondaryId,
                                    yellowIssuesRemoved: removedYellowIssues,
                                    redIssuesRemoved: removedRedIssues}'/>
    });

When the "save" button is pressed this is what I see in the javascript console:

["No address provided."] 

so you can see the the 'removedYellowIssues' list is NOT empty. It's a Javascript list containing one string. However, here is what my controller thinks:

<><><> Parameters ***:
<><><> uniqueId: 239400B
<><><> secondaryId: 1
<><><> Red issues removed: null
<><><> Yellow issues removed: null

Here is the controller action:

def saveModifiedIndividualRecord() {
        println "<><><> Parameters ***: "
        println "<><><> uniqueId: " + params.uniqueId
        println "<><><> secondaryId: " + params.secondaryId
        println "<><><> Red issues removed: " + params.redIssuesRemoved
        println "<><><> Yellow issues removed: " + params.yellowIssuesRemoved
    }

Here is more of the Javascript code containing the above save button snippet.

var currentYellowIndex = 0;
    var allYellowIssues = $('#allYellowIssues'); // The unordered list 'ul'
    var removedYellowIssues = []; // An array to keep track of issues removed
    if (allYellowIssues.length) { // If there are issues to be displayed
      var yellowElements = document.getElementsByName('yellowIssue');
      var yellowListSize = yellowElements.length;
      yellowElements[currentYellowIndex].className = "display";
      $('#yellowStartIndex').html(currentYellowIndex + 1);      
      $('#yellowSizeIndex').html(yellowListSize);

      $('#nextYellowIssue').click(function () {
        if (currentYellowIndex < yellowListSize-1) {
            yellowElements[currentYellowIndex++].className = "display-none";
            yellowElements[currentYellowIndex].className = "display";
            $('#yellowStartIndex').html(currentYellowIndex + 1);    
        }
     });

      $('#previousYellowIssue').click(function () {
        if (currentYellowIndex > 0) {
            yellowElements[currentYellowIndex--].className = "display-none";
            yellowElements[currentYellowIndex].className = "display";
            $('#yellowStartIndex').html(currentYellowIndex + 1);    
        }
     });

     $('#clearYellowFlag').click(function () {
        removedYellowIssues.push(yellowElements[currentYellowIndex].innerHTML);
        yellowElements[currentYellowIndex].className = "display-none";
        yellowElements[currentYellowIndex].remove();
        yellowListSize = yellowElements.length;
        if (yellowListSize == 0) 
            $('#yellowIssues').hide();
        else {
            currentYellowIndex = 0;
            yellowElements[currentYellowIndex].className = "display";
            $('#yellowStartIndex').html(currentYellowIndex + 1);      
            $('#yellowSizeIndex').html(yellowListSize);
        }
      });
    }

    $('#save').click(function () { 
        var uniqueId = "${recordToEdit.uniqueId}";
        var secondaryId = "${recordToEdit.secondaryId}";
        console.log(removedYellowIssues);
        <g:remoteFunction controller="customer" 
                            action="saveModifiedIndividualRecord"
                            params='{uniqueId: uniqueId, 
                                    secondaryId: secondaryId,
                                    yellowIssuesRemoved: removedYellowIssues,
                                    redIssuesRemoved: removedRedIssues}'/>
    });

The last part of the GSP is where the save button itself is defined as follows:

<br>
<button id="save"> Save </button>&nbsp&nbsp&nbsp
<button id="cancel" class="close" type="button"> Cancel </button>

Answer 1

I feel like the { } in the params should be [ ] instead. The g:remoteFunction is a GSP tag and the params should be a map.

<g:remoteFunction controller="customer" 
                            action="saveModifiedIndividualRecord"
                            params='[uniqueId: uniqueId, 
                                    secondaryId: secondaryId,
                                    yellowIssuesRemoved: removedYellowIssues,
                                    redIssuesRemoved: removedRedIssues]'/>

However, you really shouldn't use that tag (I think it is deprecated in the latest versions). You should just do an a post via jQuery:

$.post("${g.createLink(action: 'saveModifiedIndividualRecord')", {uniqueId: uniqueId, ...}, function(result) {
    ...
});