Ajax rendre attribut ne fonctionne pas dans un h: dataTable en JSF2
Question
J'ai un problème est une application simple JSF 2.0.
J'essaie de construire une liste ToDo avec le soutien ajax. J'ai quelques chaînes de todo que j'affichage à l'aide d'une table de données. Dans ce datatable J'ai un commandLink supprimer une tâche. Le problème est maintenant que le datatable ne sont pas re-rendu.
<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>
Merci pour votre aide.
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 */
}
La solution
(On dirait que je n'ai pas assez réputation de commenter les réponses des autres)
Je pense FRotthowe suggère envelopper la table avec un autre élément et en référence à l'aide de référence absolue (c.-à nommer tous les conteneurs parents à partir de la racine du document.) Dans
Quelque chose comme ceci:
<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>
Mais, en utilisant des références absolues est toujours une source de problèmes et augmente de façon exponentielle le temps de refactoring que la vue se développe.
est-ce pas là un moyen de rendre juste la table d'un
Autres conseils
Je suppose que
Après avoir lutté avec cette question pendant un certain temps, je googlé une solution simple et propre: ajouter @form render attribut
Exemple complet:
<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>
L'article complet qui m'a aidé est ici: http://blogs.steeplesoft.com/2009/10/jsf-2-hdatatable-and-ajax-updates/
utilisez ce code:
<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>
Je suis tombé sur le même problème et pensé que si vous mettez un élément (par exemple) autour de la table et rerender que cela fonctionnera. Je suis cependant pas tout à fait sûr de savoir pourquoi il est de cette façon. Tout le monde?
Pour certains JSF raison est en train de modifier l'identifiant dans le
<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>
Je reçois ce 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>
Notez que l'identifiant dans le deuxième bouton est « j_idt7: table: 0 » alors que je me attends à obtenir. « J_idt7: table » comme je le fais dans le premier
Cela ne résout pas le problème, mais peut aider à trouver une solution de contournement.
Vous devez ajouter prependId = "false" à votre h: form
Je suis tombé sur le même problème.
Une chose qui "fonctionne" est ajoutant richfaces à votre projet, et en remplaçant le
h:datatable
par
rich:datatable.
Ce qui va générer le Corrigeons d'id.