错误地使用JSF ajax调用

Question

I've read around SO and elsewhere about my problem.

I understand that what I'm doing is completely wrong. My problem is that I don't know how to do it right , and I would love it if someone could help me out.

Currently what I have looks like this:

<ul class="unstyled">   
    <ui:repeat value="#{paymentDetailsBean.products}" var="product" varStatus="status">
        <li>
            <div>
                <h:selectBooleanCheckbox value="#{product.initiallySelected}">
                    <f:ajax render="paymentDetailsForm:totalPriceText" listener="#{paymentDetailsBean.updateTotalPrice}"></f:ajax>
                </h:selectBooleanCheckbox>
            </div>
        </li>
    </ui:repeat>
</ul>

product.initiallySelected is a boolean value that I want updated when the user checks/unchecks the product.

I'm also using an ajax tag to rerender this:

<h:outputText id="totalPriceText"><b>#{passengerDetailsBean.formatCurrency(paymentDetailsBean.totalPrice.toString())}</b></h:outputText>

Basically I want the total price ot be updated, because selecting/unselecting a product will make it go up or down. I'm also using the ajax tag(And this is where the problem lies, obviously) to call this function in the backend:

public void updateTotalPrice(AjaxBehaviorEvent event)
{
    this.totalPrice = 0.0f;

    for (Product product : this.getProducts())
    {
        if (product.getInitiallySelected())
        {
            this.totalPrice += product.getCurrencyAmountGroup().getAmount();
        }
    }

    this.totalPrice += this.getTotalFaresAmount();
}

All of this works, but it's extremely slow, and I know it's because I shouldn't be doing business logic using the ajax tag. I don't know the correct way of doing it. Could anyone please help me?

Answer 1

In case you want to increase/decresase total value by checking/unchecking a particular product, and assuming your environment supports EL 2.2+ (what is true judging from your snippet), you can store the current amount as a bean property and increase/decrease it depending on the currently selected product and current value of a checkbox:

<ui:repeat value="#{paymentDetailsBean.products}" var="product">
    <li>
        <div>
            <h:selectBooleanCheckbox>
                <f:ajax render=":paymentDetailsForm:totalPriceText" 
                        listener="#{paymentDetailsBean.updateTotalPrice(product, component.value)}" />
            </h:selectBooleanCheckbox>
        </div>
    </li>
</ui:repeat>
<h:outputText value="#{paymentDetailsBean.totalPrice}" />

With the listener:

public void updateTotalPrice(Product product, Boolean direction) {
    totalPrice += product.getCurrencyAmountGroup().getAmount() *
                       (direction ? 1 : -1);
}