Удаление одной строки из DataTable с использованием Ajax

У меня есть представление JSF, в котором перечислены элементы в коллекции в Primefaces DataTable. Самые правые столбцы содержат кнопки удаления. Когда нажата кнопка удаления, предполагается сделать вызов Ajax, удалить соответствующий элемент из переменной сеанса Cart и обновить представление на месте. Я хотел бы, чтобы запрос и изменение представления были как можно более минимальными.Удаление одной строки из DataTable с использованием Ajax

Вот что я для этой цели:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:p="http://primefaces.org/ui"> 

<h:head> 
    <title>Register user</title> 
</h:head> 

<h:body> 
    <f:view> 

     <h:form id="itemsForm"> 

      <p:outputPanel id="items"> 
       <p:dataTable value="#{cart.itemList}" var="item"> 

        <p:column> 
         <f:facet name="header"> 
          <h:outputText value="name" /> 
         </f:facet> 
         <h:outputText value="#{item.product.description}" /> 
        </p:column> 

        <p:column> 
         <f:facet name="header"> 
          <h:outputText value="quantity" /> 
         </f:facet> 
         <h:outputText value="#{item.quantity}" /> 
        </p:column> 

        <p:column> 
         <f:facet name="header"> 
          <h:outputText value="" /> 
         </f:facet> 
         <p:commandButton icon="ui-icon-close" title="remove from cart"> 
          <p:ajax listener="#{cart.removeItem}" 
           update="form:itemsForm" 
           process="@this" /> 
         </p:commandButton> 
        </p:column> 

        <f:facet name="footer"> 
         Total amount: ${cart.totalAmount} 
        </f:facet> 
       </p:dataTable> 

      </p:outputPanel> 
     </h:form> 

    </f:view> 
</h:body> 
</html>

Соответственно, у меня есть следующий метод в Cart.java

public void removeItem() { 
     System.out.println("REMOVE REQUEST ARRIVED"); 
}

Однако метод removeItem даже не выполняется, когда я нажимаю удалите кнопку. Итак, мои вопросы:

1) Что не так с моим звонком в Ajax? Какие изменения я должен внести в свой XHTML?

2) Как обрабатывать запрос в методе removeItem и возвращать ответ?

3) Как обновить footer, который отображает totalAmount?

источник

2012-01-07 Murat Derya Özen

Вы можете передать #{item} в качестве параметра вашего вызова метода в actionListener.

Ваша страница .xhtml должна выглядеть следующим образом:

<p:dataTable id="cartTable" value="#{cart.itemList}" var="item"> 
    <p:column> 
     <f:facet name="header"> 
     <h:outputText value="" /> 
     </f:facet> 
     <p:commandButton icon="ui-icon-close" title="remove from cart" 
         actionListener="#{cart.removeItem(item)}" update="cartTable" /> 
    </p:column> 
</p:dataTable>

И это метод removeItem вашего ManagedBean:

@ManagedBean 
@ViewScoped 
public class Cart { 
    private List<Item> itemList; 

    public void removeItem(Item item) { 
     itemList.remove(item); 
    } 
}

источник

2012-01-07 14:00:05

Это не работает. Аннотирование '@ ViewScoped' вызывает исключение. Когда я меняю его на '@ SessionScoped', кнопка не отвечает. Ничего не происходит при нажатии. –

@Murat Я просто попытался привести пример, который можно использовать '# {item}' как параметр напрямую, без использования '. Вам определенно нужно переключить мой пример на свой собственный вариант использования. Я не могу догадаться, что вы должны дать вам 100% -ное рабочее решение. –

, за исключением того, что атрибут 'actionListener' должен быть« действием », правильно? –

1) <p:commandButton uses ajax by default , so instead placing the p:ajax use the action or actionListener of the <p:commandButton

2) Я хотел бы использовать действие кнопки и вернуть нулевое

3) обновление = «@ форма» следует обновить всю форму, и это будет обновлять всю таблицу

вот пример рабочей кнопки (ссылка) с моей страницы, я использовал п: setPropertyActionListener «пропустить» некоторые данные для удаления метода

<p:commandButton action="#{cart.removeItem}" icon="ui-icon-close" title="remove from cart" update="@form" process="@this" > 
     <f:setPropertyActionListener 
      target="#{cart.selectedItem}" 
      value="#{item}" /> 
</p:commandButton>

в своем классе добавить

private Item selectedItem; 

public Item getSelectedItem() { 
    return selectedItem; 
} 


public void setSelectedItem(Item selectedItem) { 
    this.selectedItem = selectedItem; 
}

источник

2012-01-07 13:34:29 Daniel

Спасибо за ответ. Итак, 'hoursReportBean' в вашем коде соответствует классу' Cart', который у меня есть? Как вы получаете выбранные предметы? Что такое параметр «значение»? Я просто знаком с этим. –

Я обновил (1) бюллетень моего ответа, да, это соответствует классу Cart, выбранный элемент устанавливается с помощью выбранногоHourReportsToDeleteFromTable, который является всего лишь атрибутом типа «item» в классе с getter/seter, поэтому как раз перед выполнение нажатой кнопки, которую он устанавливает, благодаря setPropertyActionListener, а затем в методе удаления, который вы можете использовать. – Daniel

Это сводит меня с ума. JSF не должно быть так тяжело. Это не работает. Запрос GET находится на своем пути, но метод не выполняется ... –

Удаление одной строки из DataTable с использованием Ajax

ответ

Смежные вопросы