Retrieve Action Function Parameter in Javascript function

Question

I have a visualforce where i am passing (request.Id) case id on click via action function to controller.I am trying to retrive the parameter back in another javascript function on click of Submit Button.But iam getting value case id as null in javascript CreateCommentForm() function.

<script>

function createCommentForm() {
      alert(' case Id ….'+'{!cId}');

    if(document.getElementById('{!$Component.newCaseComment.messag}').value == '') {
            showCommentMessage('FATAL', 'Comments must be entered.');
            return;
        }

        createComment(document.getElementById('{!$Component.newCaseComment.messag}').value,
                       '{!cId}');
    }


 function createComment(message,cId) {

       Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.RequestsController.createComment}',
           message,cId, 
            function(result, event){
                if (event.status) {
                    showCommentMessage('FATAL','Your request has been submitted.');
                    refreshCaseComments();
                } else {
                    showCommentMessage('FATAL', 'Unespected error. Message: ' + event.message);
                }
            }
        );       
    } 

<apex:actionFunction name="send"
                 action="{!myMethod}"
                 reRender="CaseCommentsList">
     <apex:param name="p1" assignto="{!cId}" value=""/>
   </apex:actionFunction>


<apex:outputPanel id="requestsList">
                <div class="row">
                <div class="col-md-6 col-sm-12" style="border-left: solid #DDD 1px">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Description</th>
                                <th>Category</th>
                                <th>Location</th>
                                <th>Request Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <apex:repeat value="{!Requests}" var="request">
                                <tr>
                                    <td><a onclick="send('{!request.Id}')">{!request.Subject}</a><input type="Hidden" value="{!request.Id}" id="caseId"/> {!cId}</td>
                                    <td>{!request.Type}</td>
                                    <td>{!request.Location__r.Name}</td>
                                    <td>
                                        <apex:outputText value="{0,date,MM/dd/yyyy}" >
                                            <apex:param value="{!request.CreatedDate}"/>
                                        </apex:outputText>
                                    </td>
                                </tr>
                            </apex:repeat>
                        </tbody>
                    </table>
                    </div>
                    <apex:outputPanel id="CaseCommentsList" >
                    <div class="col-md-6 col-sm-12" style="border-left: solid #DDD 1px">
          <h4 style="margin-top: 40px">Request Transcript</h4>

            <apex:repeat value="{!Comments}" var="comment">
            <div class="panel panel-default">
            <div class="panel-body">
              {!comment.CommentBody}
             </div>
          <div class="panel-footer"> 
              {!comment.CreatedBy.Name} - {!comment.CreatedDate}
           </div> 
         </div>
          </apex:repeat>

          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Update / Comment / Reply</h3>
            </div>
            <div class="panel-body">
            <apex:form id="newCaseComment">
              <form method="POST">
                <div class="form-group">
                   <apex:inputTextarea styleclass="form-control" id="messag" html-placeholder="Message" required="true">
                   </apex:inputTextarea>
                  </div>
                <div class="form-group">
                  <table>
                                        <tr>
                                            <td>
                                                <button type="button" class="btn btn-default" onclick="createCommentForm();" rerender="CaseCommentsList">
                                                Submit
                                                </button>
                                            </td> 

                                            <!-- --------------------------------------------------------------------------- -->
                                            <!-- Status messages -->
                                            <td>
                                                <div id="commentMessages">
                                                    <apex:outputPanel id="commentMessages" >
                                                        <apex:messages layout="table" style="text-align:center;color:#FF0000;" />
                                                    </apex:outputPanel>
                                                </div>
                                            </td> 
                                       </tr>
                                    </table>
                </div>
              </form>
              </apex:form>
            </div>
          </div>

        </div>
       </apex:outputpanel>
        </div>

                </apex:outputPanel>

Apex:

public Id cId {get;set;}

public void myMethod(){
    System.debug('cId: ' + cId);    
} 

public list<CaseComment> getComments(){
    System.debug('cId: ' + cId);
    return[Select c.Parent.Subject, c.ParentId, c.Id,c.LastModifiedDate,c.CreatorName,c.CommentBody,c.CreatedBy.Name,c.CreatedDate,c.CreatedById From CaseComment c where c.ParentId = : cId order by c.CreatedDate];
}


@RemoteAction
public static void createComment(String mess,String caseId) {
    system.debug('case Id ......'+caseId);

    CaseComment newCaseComment = new CaseComment(ParentId = caseId,
                            CommentBody = mess,IsPublished = true
                           );


    insert newCaseComment;
}

Answer 1

The substitution of merge fields for their actual values only occurs on the rendering phase. Meaning that a controller variable's value will not be updated in javascript unless you rerender the script tag.

Try placing your <script> tag inside an <apex:outputPanel Id="someId"> tag, rerendering #someId.