Атрибут рендеринга Ajax не работает в h:dataTable в JSF2
Вопрос
У меня возникла проблема с простым приложением в JSF 2.0.
Я пытаюсь создать список дел с поддержкой ajax.У меня есть несколько строк задач, которые я показываю с помощью таблицы данных.Внутри этой таблицы данных у меня есть командная ссылка для удаления задачи.Проблема в том, что таблица данных не перерисовывается.
<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>
Спасибо за вашу помощь.
Изменить (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 */
}
Решение
(Похоже, у меня недостаточно репутации, чтобы комментировать ответы других)
Я думаю, что FRotthow предлагает обернуть таблицу другим элементом и ссылаться на нее, используя абсолютную ссылку (т.именование всех родительских контейнеров из корня документа) из тега <f:ajax>.
Что-то вроде этого:
<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>
Но использование абсолютных ссылок всегда является источником проблем и экспоненциально увеличивает время рефакторинга по мере роста представления.
Нет ли способа просто отобразить таблицу из тега <f:ajax> (предотвратить добавление jsf этих раздражающих «:number_of_row» в событие ajax)?
Другие советы
Я предполагаю, что <h:таблица данных> заключен в форму?
После некоторого времени борьбы с этой проблемой я нашел в Google простое и понятное решение:добавлять @форма к оказывать атрибут <ф: аякс> и вуаля!
Полный пример:
<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>
Полная статья, которая мне помогла, находится здесь: http://blogs.steeplesoft.com/2009/10/jsf-2-hdatatable-and-ajax-updates/
используйте этот код:
<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>
Я столкнулся с той же проблемой и решил, что если вы поместите элемент (например,) вокруг стола и перерисовать, все будет работать.Однако я не совсем уверен, почему это так.Любой?
По какой-то причине JSF изменяет идентификатор в теге <f:ajax> кнопки.Если я напишу этот 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>
Я получаю этот 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>
Обратите внимание, что идентификатор второй кнопки — «j_idt7:table:0», хотя я ожидаю получить «j_idt7:table», как и в первой.
Это не решает проблему, но может помочь найти обходной путь.
Вам нужно добавить prependId="false" в вашу форму h:form.
Я столкнулся с той же проблемой.
Одна вещь, которая «работает», — это добавление богатые лица в ваш проект и заменив
h:datatable
по
rich:datatable.
Который будет генерировать правильные идентификаторы.