title: component does not update after an ajax call
body: <p>Many questions very similar to this one and yet I can't see a solution.</p>
  
  <p>The following code gives no error but does not behave as intended.
  It displays three columns:</p>
  
  <ul>
  <li><p>1st column is a tick box which activates the editable field for the 2nd column</p></li>
  <li><p>3rd column is a row deletion method</p></li>
  <li><p>4th column is just one button to move on to the next page</p>
  
  <p>
      </p>
  
  <pre><code>    &lt;h:column&gt;
          &lt;h:panelGroup id="editCol"&gt;
  
              &lt;f:facet name="header"&gt;
                  &lt;h:outputText value="Edit" style="font-weight: bold"&gt;
                  &lt;/h:outputText&gt;
              &lt;/f:facet&gt;
              &lt;h:selectBooleanCheckbox value="#{m.editable}" onclick="submit()"&gt;
                  &lt;f:ajax execute="editCol :formId:dataId:authorCol" render="editCol :formId:dataId:authorCol" /&gt;
              &lt;/h:selectBooleanCheckbox&gt;
          &lt;/h:panelGroup&gt;
  
      &lt;/h:column&gt;
  
      &lt;h:column&gt;
          &lt;h:panelGroup id="authorCol"&gt;
              &lt;f:facet name="header"&gt;
                  &lt;h:outputText value="Label" style="font-weight: bold"&gt;
                  &lt;/h:outputText&gt;
              &lt;/f:facet&gt;
              &lt;h:inputText value="#{m.author2displayed}" rendered="#{m.editable}" size="10"/&gt;
              &lt;h:outputText value="#{m.author2displayed}" rendered="#{not m.editable}"/&gt;
              &lt;h:commandButton value="save edits" rendered="#{m.editable}" onclick="submit()" action ="#{finalCheckBean.saveedits()}"&gt;
                  &lt;f:ajax execute="authorCol" render="authorCol" /&gt;
              &lt;/h:commandButton&gt;
          &lt;/h:panelGroup&gt;
      &lt;/h:column&gt;
  
      &lt;h:column&gt;
          &lt;h:panelGroup id="deleteCol"&gt;
              &lt;f:facet name="header"&gt;
                  &lt;h:outputText value="delete row(s)" style="font-weight: bold"&gt;
                  &lt;/h:outputText&gt;
              &lt;/f:facet&gt;
              &lt;h:selectBooleanCheckbox value="#{m.deleted}" onclick="submit()"/&gt;
              &lt;h:commandButton value="delete row(s)?" rendered="#{m.deleted}" onclick="submit()" action ="#{finalCheckBean.deleteRow()}"/&gt;
          &lt;/h:panelGroup&gt;
      &lt;/h:column&gt;
  
      &lt;h:column&gt;
          &lt;f:facet name="header"&gt;
              &lt;h:commandButton value="save changes" action="#{finalCheckBean.moveon}"/&gt;
          &lt;/f:facet&gt;
  
      &lt;/h:column&gt;
  
  &lt;/h:dataTable&gt;
  </code></pre>
  
  <p></p>
  
  <ol>
  <li><p>When I tick the <code>selectBooleanCheckbox</code> in the first column, the box gets ticked but nothing happens, when actually the display of components in the 2nd column should be toggled.</p></li>
  <li><p>Interestingly, when I <em>then</em> click on the <code>selectBooleanCheckbox</code> in the 3rd column, which does not use ajax, then the 2nd column gets re-rendered and I can see the effect of my tick action in step 1.</p></li>
  </ol></li>
  </ul>
  
  <p>How can I make my <code>selectBooleanCheckbox</code> in first column work properly?</p>