Refreshing specific cell in dataTable?

Question

Hi
How do I get a dataTable to re-render a specific cell? As an example, consider Bean listed below. Initially, the dataTable displays the values as iterated over Bean.lines. Later in response to a user action (see Bean.updateLine), I'd like the appropriate cell in the dataTable to be refreshed (without of course having to press a 'Refresh' button).
How do I achieve this with dataTable?
public class Bean {
  private List<Line> lines = new ArrayList<Line>();
  public List<Line> getLines() {
    return lines;
  // called (in response to a user action for example) to refresh a specific line value
  public void updateLine() {
    lines.get(0).setVal("some new value");
  public class Line {
    private final String id;
    private String val;
    private Line(String id) {
      this.id = id;
    public String getId() {
      return id;
    // calling this must trigger the dataTable to refresh the appropriate cell (ideally)
    // or else the entire dataTable in the browser
    public void setVal(String val) {
      this.val = val;
    public void getVal() {
      return val;
  } // Line
        <h:dataTable value="#{bean.lines}" var="line">
          <h:column>
            <h:outputText value="#{line.id}"/>
          </h:column>
          <h:column>
            <h:outputText value="#{line.val}"/>
          </h:column>
        </h:dataTable>Help much appreciated
Lance

Answer 1

Thanks, AJAX is doing the trick nicely.
For the benefit of a future question, I'm using onclick="doSomething()" on a component within the table (a selectBooleanCheckbox in my case).
Main JavaScript / AJAX:
      <script type="text/javascript">
        function doSomething(elementId) {
          var rowNum = elementId.split(":")[2]; // position in table
          var someId = document.getElementById("form_id:table_id:" +
                                              rowNum + ":textbox_id").innerHTML;
          var url = "handler?cmd=MY_SERVLET_CMD" + // handler points to HandlerServlet
                            "&some_id=" + encodeURIComponent(someId) +
                            "&row_num=" + encodeURIComponent(rowNum);
          if (typeof XMLHttpRequest != "undefined") {
            req = new XMLHttpRequest(); // AJAX
          } else if (window.ActiveXObject) {
            req = new ActiveXObject("Microsoft.XMLHTTP");
          } else {
            alert("Browser not supported!");
          req.open("GET", url, true); // true = asynchronous AJAX call
          req.onreadystatechange = doSomethingCallback; // only if asynchronous
          req.send(null);
      </script>Callback function (invoked on return from the servlet - see reference in doSomething above):
      <script type="text/javascript">
        function doSomethingCallback() {
          if (req.readyState == 4) { // checks are needed else we react before response is complete
            if (req.status == 200) { // see comment above
              var prefix = "form_id:table_id:";
              var suffix = ":checkbox_id"; // we want to update all check boxes - see below
              var msg = req.responseXML.getElementsByTagName("message")[0];
              var lineCount = msg.getElementsByTagName("line_count")[0].childNodes[0].nodeValue;
              var rowNum = msg.getElementsByTagName("row_num")[0].childNodes[0].nodeValue;
              var checkAll =
                document.getElementById(prefix + rowNum + ":check_all_id"); // another check box that determines state of check boxes below
              var lineCheckId = ""; // line checkbox element
              for (var i = rowNum, n = parseInt(rowNum) +
                                              parseInt(lineCount); i < n; i++) {
                lineCheckId = prefix + i + suffix;
                document.getElementById(lineCheckId).checked = checkAll.checked; // update the DOM
            } // status
          } // readyState
      </script>