Update input text fields with ajax

Question

I'm using primefaces 5.0. I'm trying to implement set of input fields for each "user - product" where sum of values in InputText fields for each panel can only be 100%. So for example if i have 3 fields each has to be 33.333% and if I lower one value of those three fields I have to redistribute other two values i.e.(25%, 37.5%, 37.5%). Something like Humblebundle has for their charity redistribution.

When I generate dynamic fields with ui:repeat I cannot get ajax to update other fields in panel. XHTML file:

<p:tab id="tuning" title="Employee tuning">
    <p:panel header="Set employee plans">

        <p:messages />
        <h:panelGrid columns="2" columnClasses="label, value">
            <ui:repeat  value="#{planSetViewController.office_plan_groups}" var="office_plan_group">
                <p:panel id="#{office_plan_group.product_group.name}_group" header="#{office_plan_group.product_group.name}" style="float:left;">
                    <ui:repeat value="#{office_plan_group.product_plans}" var="product_plan" varStatus="var">
                    <p:panel header="#{product_plan.product.name}" style="float:left; width: 225px;">
                        <h:panelGrid columns="3" cellspacing="10" cellpadding="3">
                            <ui:repeat value="#{product_plan.employee_plans}" var="employee_plan">
                                <p:outputLabel value="#{employee_plan.employee.name}"/>:
                                <p:outputLabel value="#{employee_plan.plan.value}" style="margin:3px;"/>

                                <p:inputText value="#{employee_plan.percentage}"  style="width:30px;margin: 3px;">
                                    <p:ajax listener="#{product_plan.setPercentage(employee_plan)}" update="@all" />
                                </p:inputText>
                            </ui:repeat>   
                        </h:panelGrid>
                    </p:panel>
                </ui:repeat>

                </p:panel>

            </ui:repeat>
        </h:panelGrid>

    </p:panel>
</p:tab>

And bean file:

public class Product_plan {

private Product product;
private List<Employee_plan> employee_plans;
private float product_plan_value;

public void setPercentage(Employee_plan employee_plan)
{
    float newPercentage;
    if(employee_plans.size() > 1)
    {
        newPercentage = (100 - employee_plan.getPercentage())/(employee_plans.size()-1);
    }
    else
        newPercentage = (100 - employee_plan.getPercentage());

    System.out.println("setPercentage: "+newPercentage);
    for(int i=0;i<employee_plans.size();i++)
    {
        if(employee_plans.get(i).getPlan().getPlan_realization_ID() != employee_plan.getPlan().getPlan_realization_ID())
        {   
            System.out.println("Setting...");

            employee_plans.get(i).setPercentage(newPercentage);
            employee_plans.get(i).getPlan().setValue((newPercentage/100)*product_plan_value);

        }

    }
}

EDIT: I already tried with update="@form" and to wrap panel with static <div id="something"> and update it, then I got this wierd error: "javax.faces.FacesException: Cannot find component with expression "something" referenced from ..."

possible duplicate of @all in JSF Ajax does not work

Smutje
– Smutje

2014-09-29 20:48:05 +00:00
Commented Sep 29, 2014 at 20:48 — Smutje
– Smutje, Commented Sep 29, 2014 at 20:48

Dawn · Accepted Answer · 2014-10-08 14:04:25Z

1

Try to give your h:panelGridan id and reference it in your update-tag:

<h:panelGrid id="percentagePanel" columns="3" .... >
    <ui:repeat value="#{product_plan.employee_plans}" var="employee_plan">                   
        ...
        <p:inputText value="#{employee_plan.percentage}"  style="width:30px;margin: 3px;">
            <p:ajax update="percentagePanel" listener="#{product_plan.setPercentage(employee_plan)}" />
        </p:inputText>
    </ui:repeat>   
</h:panelGrid>

Compared to a normal div, h:panelGrid is a JSF-component and thereby found by the engine. Apart from that, you can try update="@parent" to reference the next parent-component of your inputfield (in this case the panelGrid) in a relative way.

Please be sure you also have a surrounding h:form (there is none in your example).

answered Oct 8, 2014 at 14:04

Dawn

1266 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RustyIguana Over a year ago

update="@parent" helped. I couldn't set id to h:panelGrid because I generate grid dynamicaly.

Collectives™ on Stack Overflow

Update input text fields with ajax

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related