title: Why my grails checkbox onclick remote function ajax call displays updates wrong?
body: <p>Hi, I have a page called taskReminder that renders two templates: 1 for task and 1 for reminder. The task has checkbox that when ticked, it should repopulate/update the tasklist. Everything is working fine but what I can't seem to understand is why task frame updates and displays the whole page  inside it. 
  In summary: The whole page has a task frame in which it also displays the whole page inside it.(like inception!)
  I redesigned the html, re-evaluated my remotefunction, I also tried putting a diff checkbox inside the reminder frame -  when ticked, it updates reminderlist that is inside the task frame with the whole page in it, not his own frame list.</p>
  
  <p>At first load, checkbox not clicked - display is fine
  <img src="https://i.stack.imgur.com/1dWy4.jpg" alt="at first load"></p>
  
  <p>when checkbox is ticked and task frame is scrolled down, notice the reminder frame is also there or the whole page is</p>
  
  <p><img src="https://i.stack.imgur.com/ygAZT.jpg" alt=""></p>
  
  <p>Why is this so?
  my code:
  for the taskreminder holder</p>
  
  <pre><code>   &lt;%@ page import="com.irondata.icmgrails.constants.*" %&gt;
  
  &lt;html&gt;
    &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
          &lt;meta name="layout" content="main" /&gt;
          &lt;style type="text/css"&gt;
              body {background-color:#EEF2F7;}
          &lt;/style&gt;
          &lt;script type="text/javascript" language="javascript" src="${resource(dir:'js',file:'icmutilities.js')}"&gt;&lt;/script&gt;
      &lt;/head&gt;
     &lt;body role="main"&gt;
     &lt;g:form&gt;
          &lt;g:hiddenField name="caseId" value="${cmCaseInstance?.id}" /&gt; 
  
          &lt;div class="body" role="article"&gt;
              &lt;h1&gt;Tasks and Reminders&lt;/h1&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;div id="tasks"&gt;
                      &lt;div class="summary"&gt;
                          &lt;div class="summaryHeader"&gt;
                              &lt;div class="summaryHeaderLeft"&gt;Tasks&lt;/div&gt;
                              &lt;div class="summaryHeaderCenter"&gt;&amp;nbsp;&lt;/div&gt;
                              &lt;div class="summaryHeaderRight"&gt;&amp;nbsp;&lt;/div&gt;
                          &lt;/div&gt;
  
                           &lt;div class="gadgetShort"&gt;
                              &lt;div&gt;
                                  &lt;g:checkBox name='test' onclick="${remoteFunction(action:'workCategory', params:'\'completed=\'+ this.checked + \'&amp;caseId=\' + caseId.value', update:[success:'divTasks', failure:'divTasks']) }" value="${false}"/&gt;
                              &lt;/div&gt;
                              &lt;div id="divTasks"&gt;
                                  &lt;g:render template="taskList" model="['taskInstanceList': taskInstanceList, 'taskInstanceTotal': taskInstanceTotal, 'cmCaseInstance':cmCaseInstance]"/&gt;
                              &lt;/div&gt;   
                           &lt;/div&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="reminders"&gt;
                      &lt;div class="summary"&gt;
                          &lt;div class="summaryHeader"&gt;
                              &lt;div class="summaryHeaderLeft"&gt;Reminders&lt;/div&gt;
                              &lt;div class="summaryHeaderCenter"&gt;&amp;nbsp;&lt;/div&gt;
                              &lt;div class="summaryHeaderRight"&gt;&amp;nbsp;&lt;/div&gt;
                          &lt;/div&gt;
  
                           &lt;div class="gadgetShort"&gt;
                              &lt;div&gt;
                                  &lt;span class="gadgetName"&gt;Reminder List&lt;/span&gt;&lt;span class="gadgetNumber"&gt;${taskInstanceTotal}&lt;/span&gt;
                              &lt;/div&gt;
                              &lt;div id="divReminders"&gt;
                                  &lt;g:render template="reminderList" model="['reminderList': reminders, 'reminderListTotal': reminderCount]"/&gt;
                              &lt;/div&gt;   
                           &lt;/div&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
     &lt;/g:form&gt;
  
  
  
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>task list &amp; reminder list are exactly thesame so I did not put the code for reminder list. </p>
  
  <pre><code>&lt;span class="gadgetName"&gt;Task List&lt;/span&gt;&lt;span class="gadgetNumber"&gt;${taskInstanceTotal}&lt;/span&gt;
  
              &lt;table cellspacing="0" cellpadding="0" id="tasksTableGrails" class="icmSortableTable" summary="Tasks" &gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
  
                          &lt;g:sortableColumn scope="col" property="activityDescrip" title="${message(code: 'taskByCase.description.label', default: 'Description')}" params="${flash}" /&gt;
  
                      &lt;/tr&gt;
                  &lt;/thead&gt;                                              
                  &lt;g:each in="${taskInstanceList}" status="i" var="taskInstance"&gt;
                      &lt;tr class="${(i % 2) == 0 ? '' : 'altRowColor'}"&gt;
  
                          &lt;td&gt;${fieldValue(bean: taskInstance, field: "activityTypeIdActivityType.activityDescrip")}&lt;/td&gt;
  
                  &lt;/g:each&gt;          
              &lt;/table&gt;
  </code></pre>
  
  <p>here is my code behind:</p>
  
  <pre><code>def workCategory = {
  
  
          def isCompletedTaskIncluded
  
  
          flash.employeeId = params.employeeId
          flash.caseId = params.caseId
  
          def cmCaseInstance = CmCase.get(params.caseId as Long)
          def employee = employeeService.getUserEmployee(session.currentUser.id)
  
          def criteria = Task.createCriteria()
          def query = {
  
              eq ("cmCaseIdCmCase", cmCaseInstance)
              or {
                  eq ("fromEmplIdEmployee", Employee.get(employee.id))
                  eq ("toEmplIdEmployee", Employee.get(employee.id))
              }
              if(params.completed=="false")
                  isNull("actCompDate")
  
  
          }
  
          def taskInstanceList = criteria.list(query)
  
          def reminders = Reminder.createCriteria().list() {
              createAlias("cmCaseIdCmCase", "cmCase")
              isNull("cmCase.closedDate")
              eq('employeeIdEmployee', employee)
              eq("cmCaseIdCmCase", cmCaseInstance)
  
  
          }
  
          def taskCount = taskInstanceList.size()
          def reminderCount = reminders.size()
          render(view: "taskReminder", model: [taskInstanceList: taskInstanceList, taskInstanceTotal:  taskCount, reminderList: reminders, reminderListTotal: reminderCount, cmCaseInstance:cmCaseInstance])
  
      }
  </code></pre>