re-render single cell with ajax on is not possible

Question

in the followinng example, I have a single-column table with input fields placed in its cells.

Background color of an input field is changed per ajax to green (when filled), or to red (when empty).

XHTML:

 <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
  xmlns:c="http://java.sun.com/jsp/jstl/core"
  xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
<h:head>
</h:head>
<h:body>
  <h:form>
    <h:dataTable value="#{testBean.getData()}" var="row" id="table">
      <h:column id="cell">
        <h:inputText value="#{row[0]}" id="input" style="background-color:#{empty row[0] ? 'red' : 'green'}">
          <f:ajax event="change" render="cell" />
        </h:inputText>
      </h:column>
    </h:dataTable>
  </h:form>
</h:body>
</html>

Java:

@ManagedBean(name="testBean")
@SessionScoped
public class TestBean {
    public TestBean() {
        super();
    }

    private static String [][] initdata = {{"test"},{null},{null},{null},{null}};   

    private List<String[]> data = Arrays.asList(initdata);   

    public List<String[]> getData() {  
        return data;  
    }
}

The problem is, that

<f:ajax event="change" render="cell" />

does not work. To make it work render="input" must be used. Or <h:panelGroup> must be added as direct child of <h:column> (then it can be re-rendered using its id) But my use case is more complicated, than this simplified example. I want to avoid additional markup and html-nesting if possible. And, of course, re-render the whole table is not an option.

So, why re-render of <h:column> is not possible ?

Thanks in advance,

Alexey

PS: Tested with MyFaces 2.1.12 & Mojarra 2.1.24

score 2 · Answer 1 · edited May 23 '17 at 11:50

2

This is because a datatable is a repeating construct, which uses the column components to render all the rows in the datatable. More specifically, even though in the output (HTML) you end up with many rows, in the JSF component tree there is only one component that takes care or rendering all the rows and in the update attribute you can only specify a component id but not a client side id of a specific HTML tag. See this answer for a possibly better explanation.

edited May 23 '17 at 11:50

Community

1
1

answered Sep 11 '13 at 17:34

rdcrng

3,415
2
18
36

1

But it does not explain, why render="input" works. By the way, "input" in this case is "row-scoped" and correctly translated into "table::input" during relevant JSF lifecycle phases. But "cell" is obviously not. – alsha Sep 12 '13 at 08:54

re-render single cell with ajax on is not possible

1 Answers1