CODEWITHSUNDEEP
ajaxjsfprimefaces
Lars
Lars

Reputation: 824

Problems with ajax in jsf updating an output text field

I'm new to JSF and in class we should just set up a little "Pizza-Service" with logins etc. On the Page where i want to prepare my Order as a user I've a data table (primeface data table) with 4 columns. The last one is for the number of pizza of the type in the current cell.

What I want: If I am typing in a Number i want to set up a current Order (works fine so far with ajax) in the same moment i just want to show the user the current price. This is the little thing that is not working.

When I am using the tag there is just nothing happening and if I am taking the tag I'm getting this mistake:

<f:ajax> contains an unknown id 'ausgabe' - cannot locate it in the context of the component menge

What I thought was take the ajax tag set up a function (take the current order) and render an output text where the calculated price is shown directly. I called those function in german so bestellungAufnehmen = takeOrder and preisBerechnen = calculatePrice.

Thanks if someone could help me!

Here is the xhtml:

<h:head>
    <title>Facelet Title</title>
</h:head>
<h:body>
    <h:form>
        <p:dataTable id="table" var="pizza" value="#{model.getPizzen()}">
        <p:column headerText="Nr">
            <h:outputText value="#{pizza.nr}"/>
        </p:column>
        <p:column headerText="Artikel">
            <h:outputText value="#{pizza.name}"/>
        </p:column>
        <p:column headerText="Preis">
            <h:outputText value="#{pizza.preis}"/>
        </p:column>
        <p:column headerText ="Menge">
            <h:inputText id="menge" value="#{bestellung.anzahl}">
            <f:ajax event="keyup" render="ausgabe" listener="#{bestellung.bestellungAufnehmen(pizza)}"/>
            </h:inputText>
        </p:column>
    </p:dataTable>
        <h:outputLabel value="Zu Zahlen: "/>
        <h:outputText id="ausgabe" value="#{bestellung.preisBerechnen()} €"/>
    </h:form>
</h:body>

and here is the the Bean with those functions.

@Named
@SessionScoped
public class Bestellung implements Serializable {


    private static int bstzaehler=0;
    private int bstnr;
    private Map<String,Bestellposten> posten;
    private int anzahl;

    public Bestellung(){
        this.bstnr=++bstzaehler;
        this.posten = new HashMap<>();

    }

    /**
     * @return the bstnr
     */
    public int getBstnr() {
        return bstnr;
    }

    /**
     * @param bstnr the bstnr to set
     */
    public void setBstnr(int bstnr) {
        this.bstnr = bstnr;
    }

    public void bestellungAufnehmen(Pizza pizza){
        if(this.posten.containsKey(pizza.getName()) == false){
        Bestellposten b = new Bestellposten(this.getAnzahl(), pizza);
        this.posten.put(pizza.getName(),b);
        } else {
            if(this.getAnzahl() > 0 ){
                Bestellposten tmp = this.posten.get(pizza.getName());
                tmp.setMenge(this.getAnzahl());
            } else {
                this.posten.remove(pizza.getName());
            }
        }
        System.out.println("groesse: "+posten.size());
        System.out.println("akt preis: "+this.preisBerechnen());
    }

    /**
     * @return the anzahl
     */
    public int getAnzahl() {
        return anzahl;
    }

    /**
     * @param anzahl the anzahl to set
     */
    public void setAnzahl(int anzahl) {
        this.anzahl = anzahl;
    }

    public double preisBerechnen(){
        double sum = 0.0;
            for(String key : this.posten.keySet()){
                Pizza tmp = this.posten.get(key).getPizza();
                sum += tmp.getPreis() * this.posten.get(key).getMenge();
            }
        return sum;
    }
}

Upvotes: 0

Views: 4913

Answers (3)

Lars
Lars

Reputation: 824

The solution of luiggi worked but i couldnt answer directly because of my "low-level" here. Iam not on my computer right now but isnt "update" an attribute of p:ajax and not of f:ajax and is the same as render? but i will try it aswell later on. thx!

Upvotes: 1

Rax
Rax

Reputation: 406

I think, you should use update attribute to update that outputText, like update=":FormId:ausgabe"

<f:ajax event="keyup" 
render=":frmPizza:ausgabe" 
listener="#{bestellung.bestellungAufnehmen(pizza)}" 
update=":frmPizza:ausgabe" />

Upvotes: 1

Luiggi Mendoza
Luiggi Mendoza

Reputation: 85789

Try giving the full qualified id for the component:

<h:form id="frmPizza">
    <p:dataTable id="table" var="pizza" value="#{model.getPizzen()}">
        <p:column headerText="Nr">
            <h:outputText value="#{pizza.nr}"/>
        </p:column>
        <p:column headerText="Artikel">
            <h:outputText value="#{pizza.name}"/>
        </p:column>
        <p:column headerText="Preis">
            <h:outputText value="#{pizza.preis}"/>
        </p:column>
        <p:column headerText ="Menge">
            <h:inputText id="menge" value="#{bestellung.anzahl}">
            <f:ajax event="keyup" render=":frmPizza:ausgabe" listener="#{bestellung.bestellungAufnehmen(pizza)}"/>
            </h:inputText>
        </p:column>
    </p:dataTable>
    <h:outputLabel value="Zu Zahlen: "/>
    <h:outputText id="ausgabe" value="#{bestellung.preisBerechnen()} €"/>
</h:form>

Upvotes: 1

Related Questions