How to add ajax to dynamically created primefaces input fields

Question

I want to create a page to allow users to update a mysql table. This table can be changed by client admins so I have to read the table schema and create fields on the fly. I got the basic code for doing that from How to create dynamic JSF form fields and the ajax code from How to add ajax validation to programmatically generated primefaces component.

To create a proof of concept page I use the following code (note, I'm using primefaces):

   for (int idx = 1; idx < 3; idx++) {
        UIInput input = new InputText();
        input.setId("text" + idx); 
        ValueExpression targetExpression = facesContext.getApplication().getExpressionFactory().createValueExpression(facesContext.getELContext(), "#{viewMakeFields.value}", String.class);
        input.setValueExpression("value", targetExpression);
        AjaxBehavior ab = new AjaxBehavior();
        ab.setAsync(true);
        ab.setProcess("text"+idx);
        input.addClientBehavior("blur", ab); // "change" doesn't work either
        form.getChildren().add(input);
    }

Then, in the getter and setter, I'm getting the component ID to identify which field is changed:

public static String getCallingComponentID() {
    UIComponent component = UIComponent.getCurrentComponent(FacesContext.getCurrentInstance());
    return component.getId();
}

public String getValue() {
    String id = getCallingComponentID();
    System.out.println("getValue " + id);
    return text1;
}

public void setValue(String text1) {
    String id = getCallingComponentID();
    System.out.println("setValue " + id);
    this.text1 = text1;
}

The ajax isn't firing and when I click the submit button I get (and I know mixing partial and full submits isn't good):

INFO:   getValue text1
INFO:   getValue text2
INFO:   getValue text1
INFO:   getValue text2
INFO:   setValue j_id1
INFO:   setValue j_id1
INFO:   getValue text1
INFO:   getValue text2

I see two possible solutions: get ajax working so that the component calling the setter has the correct id or get the form submit to identify which child is calling the setter. The former is preferable since I want to disable the save button until something has changed but I'm willing to accept the latter at this point. Any help would be much appreciated.

I don't think that answer applies to you. AjaxBehavior is a JSF2 construct, I don't believe that's supported in v1.x — kolossus, Mar 05 '14 at 00:03
The creating of the form works under 2.0. (I'm running 2.2) (That's the part of this that does work.) The question is how to get an ajax call to fire every time there is a change in a field. I'm having a similar problem with the valueChangeListener in p:editor not firing and have a work-around that is a total kludge that might work here as well. But the client behavior listener seems like the right thing and I'd really like to know where I'm going wrong on how it works. — wjr, Mar 05 '14 at 15:17

score 0 · Answer 1 · answered Mar 05 '14 at 20:43

0

Turns out this code does work. Somewhere in my meandering the error changed and I didn't understand the significance of that. Replacing head with h:head in the xhtml file that I was adding the fields to makes ajax work.

answered Mar 05 '14 at 20:43

wjr

324
1
3
14

How to add ajax to dynamically created primefaces input fields

1 Answers1