Ajax tornar atributo não funcionam em um h: dataTable no JSF2

Question

Eu tenho algum problema de com uma simples aplicação em JSF 2.0.

I tentar construir uma lista de tarefas com ajax apoio. Eu tenho algumas seqüências de tarefas que eu exibição usando uma tabela de dados. Dentro desta tabela de dados Eu tenho um commandLink para excluir uma tarefa. O problema agora é que a tabela de dados não se re-renderizado.

    <h:dataTable id="todoList" value="#{todoController.todos}" var="todo">
        <h:column>
                <h:commandLink value="X" action="#{todoController.removeTodo(todo)}">
                    <f:ajax execute="@this" render="todoList" />
                </h:commandLink>
        </h:column>
        <h:column>
            <h:outputText value="#{todo}"/>
        </h:column>
    </h:dataTable>

Obrigado por sua ajuda.

Edit (TodoController):

@ManagedBean
@SessionScoped
public class TodoController {

private String todoStr;
private ArrayList<String> todos;

public TodoController() {
    todoStr="";
    todos = new ArrayList<String>();
}

public void addTodo() {
    todos.add(todoStr);
}

public void removeTodo(String deleteTodo) {
    todos.remove(deleteTodo);
}

/* getter / setter */
}

Answer 1

(parece que eu não tenho reputação suficiente para comentar sobre as respostas dos outros)

eu pensar FRotthowe sugere envolver a mesa com outro elemento e fazendo referência a ela usando referência absoluta do (isto é, os nomes de todas as recipientes pai a partir da raiz do documento.).: Tag

Algo parecido com isto:

<h:form id="form">
    <h:panelGroup id ="wrapper">
        <h:dataTable value="#{backingBean.data}" var="list">
            <h:column>
                <h:commandButton value="-" action="#{backingBean.data}">
                    <f:ajax render=":form:wrapper"/>
                </h:commandButton>
            </h:column>
    </h:dataTable>
    </h:panelGroup>
</h:form>

Mas, usando referências absolutas é sempre uma fonte de problemas e aumenta exponencialmente o tempo de refatoração como a visão cresce.

Não há uma maneira de simplesmente tornar a tabela de um tag (evitar jsf de acrescentar aqueles irritantes ": number_of_row" no evento ajax)

?

Answer 2

Presumo que o ? é delimitada por uma forma

Depois de lutar com este problema por um tempo, eu pesquisei uma solução fácil e limpo: add @form para render atributo da e voila!

exemplo completa:

<h:form id="theForm">
    <h:dataTable id="table" value="#{tasksMgr.allTasks}" var="task">

        <h:column>
           #{task.name}
        </h:column>

        <h:column>
            <h:commandButton id="removeTaskButton" value="X" action="#{tasksMgr.removeTask(task)}">
                <f:ajax render="@form" />
            </h:commandButton>
        </h:column>
    </h:dataTable>
</h:form>

O artigo completo, que me ajudou é aqui: http://blogs.steeplesoft.com/2009/10/jsf-2-hdatatable-and-ajax-updates/

Answer 3

usar este código:

<h:form id="form">
<h:panelGroup id="panel">
    <h:dataTable id="todoList" value="#{todoController.todos}" var="todo">
        <h:column>
                <h:commandLink value="X" action="#{todoController.removeTodo(todo)}">
                    <f:ajax render=":form:panel" />
                </h:commandLink>
        </h:column>
        <h:column>
            <h:outputText value="#{todo}"/>
        </h:column>
    </h:dataTable>
</h:panelGroup>
</h:form>

---

Answer 4

Eu corri para o mesmo problema e percebi que se você colocar um elemento (por exemplo) em torno da mesa e renderizados isso, ele vai trabalhar. I no entanto não estou muito certo porque é dessa forma. Qualquer um?

Answer 5

Por alguma razão JSF está modificando o id no no botão. Se eu escrever este xhtml:

<h:form id="form">
    <h:commandButton value="Button">
        <f:ajax render="table"/>
    </h:commandButton>

    <h:dataTable id="table" value="#{tableData.data}">
        <h:column>
            <h:commandButton value="Button">
                <f:ajax render="tocoto"/>
            </h:commandButton>
        </h:column>
    </h:dataTable>
</h:form>

Recebo esta html:

<form id="j_idt7" name="j_idt7" method="post" action="/WebApplication1/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="j_idt7" value="j_idt7" />
    <input id="j_idt7:j_idt8" type="submit" name="j_idt7:j_idt8" value="Button" onclick="mojarra.ab(this,event,'action',0,'j_idt7:table');return false" />

    <table id="j_idt7:table"><tbody>
        <tr>
            <td><input id="j_idt7:table:0:j_idt10" type="submit" name="j_idt7:table:0:j_idt10" value="Button" onclick="mojarra.ab(this,event,'action',0,'j_idt7:table:0');return false" /></td>
        </tr>
    </tbody></table>

     <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-7634557012794378167:1020265910811114103" autocomplete="off" />
</form>

Observe que o id no segundo botão é 'j_idt7: tabela: 0', enquanto eu estou esperando para começar. 'J_idt7: tabela' como eu faço no primeiro

Isso não resolve o problema, mas pode ajudar a encontrar uma solução alternativa.

Answer 6

Você precisa adicionar prependId = "false" para o seu h: form

Answer 7

Eu corri para o mesmo problema.

Uma coisa que "obras" está adicionando richfaces ao seu projeto, e substituindo o

h:datatable 

por um

rich:datatable. 

que irá gerar o ID correto.