<f：ajax> 在 <h：form> 里面<ui：repeat>的奇怪行为

Question

我有一个由ui：repeat呈现的数据表。因为我希望用户能够按行更改数据，所以每一行都包含在 h：form 中。最后，每个h：form都有一个带有f：ajax标签的按钮。我的行为非常不一致。

<ui:repeat value="#{importManager.items}" var="item" varStatus="status">
    <h:form>
        <tr>
            <td>
                <h:outputText value="#{status.index}"/>
            </td>
            <td>
                <h:inputText id="title" value="#{item.title}" styleClass="#{item.validTitle ? 'valid' : 'invalid'}"/>
            </td>
            <td>
                <h:inputText id="artist" value="#{item.artist}" styleClass="#{item.validArtist ? 'valid' : 'invalid'}"/>
            </td>
            <td>
                <h:commandButton value="#{importMessages.submit}">
                    <f:ajax execute="@form" render="@all" listener="#{importManager.publish(item)}"/>
                </h:commandButton>
            </td>                           
        </tr>
    </h:form>
</ui:repeat>

上述工作，但显然带宽并不便宜。

如果我将 render="@all" 更改为 render="@form"，Firebug 会显示部分响应正在正常发送，但我的浏览器 （Firefox） 神秘地没有显示它。所以我猜它（浏览器）找不到要更新的元素？

如果我将 execute="@form" 更改为 execute="@all"，我会得到非常奇怪的行为，即数据丢失，受影响的字段变为空白。

背豆很简单：

    public void publish(final Item item)
    {
        Set<ConstraintViolation<Item>> violations = item.validate();
        if (violations.isEmpty())
        {
            temporaryRegistry.deleteItem(item);
            registry.storeItem(item);
        }
        else
        {
            // Display error messages
        }
    }

和模型：

@Entity
public class Item implements Cloneable
{
    @Id @GeneratedValue
    private long identifier;
    @NotNull(groups={Warning.class})
    @Length(min=1, max=80, groups={Warning.class})
    private String title;
    @NotNull(groups={Warning.class})
    @Length(min=1, max=80, groups={Warning.class})  
    private String artist;
    @NotNull(groups={Warning.class})
    @Length(min=1, max=10, groups={Warning.class})
    private String media;
    @NotNull(groups={Warning.class})
    @Length(min=1, max=5, groups={Warning.class})
    @Column(name = "_condition")
    private String condition;
// Setters and Getters
    public boolean isValidTitle()
    {
        final ValidatorFactory factory = Validation.buildDefaultValidatorFactory();
        final Validator validator = factory.getValidator();
        final Set<ConstraintViolation<Item>> violations = validator.validateProperty(this, "title", Warning.class);
        return violations.isEmpty();        
    }
    public boolean isValidCondition()
    {
        final ValidatorFactory factory = Validation.buildDefaultValidatorFactory();
        final Validator validator = factory.getValidator();
        final Set<ConstraintViolation<Item>> violations = validator.validateProperty(this, "condition", Warning.class);
        return violations.isEmpty();        
    }
    public boolean isValidArtist()
    {
        final ValidatorFactory factory = Validation.buildDefaultValidatorFactory();
        final Validator validator = factory.getValidator();
        final Set<ConstraintViolation<Item>> violations = validator.validateProperty(this, "artist", Warning.class);
        return violations.isEmpty();
    }
    @Override
    public boolean equals(final Object object)
    {   
        return (object instanceof Item) && (object != null) && (((Item) object).getIdentifier() == identifier);
    }
    @Override
    public int hashCode()
    {
        return Long.valueOf(identifier).hashCode();
    }
    public Set<ConstraintViolation<Item>> validate()
    {
        final ValidatorFactory factory = Validation.buildDefaultValidatorFactory();
        final Validator validator = factory.getValidator();
        return validator.validate(this, Warning.class);
    }
}

任何人都可以解释这一点，有没有人有办法仅通过ajax提交表单和表单并显示结果？

Answer 1

您的 HTML 最终会在每个<tr>周围都有一个<form>。这是非法的 HTML 语法，因此未指定浏览器行为。

您需要将<h:form>放在<table>周围.如果您需要围绕单个"行"的表单，那么您可能希望将单个<table>重新设计为具有固定列宽的多个<table>或一组<div>。