0

我在 JBoss AS 6.1 上使用 Mojarra 2.1.13 和 Richfaces 4.2.3.Final 执行 jsf 页面的 ajax 侦听器有一个奇怪的问题。我已尝试在以下示例中重现该问题，但此示例中未出现此问题。

索引.xhtml

我插入了rich:jQuery强制包含 jQuery 的元素，因为在我的实际应用程序中，表单的命令按钮是隐藏的，并按jQuery('#one:form:submit').click();方法执行。

<h:body>
    <h:outputScript library="js" name="app.js"/>
    <rich:jQuery selector="document" query="ready(function(){app.init();})" timing="domready"/>
    <h:panelGroup layout="block">
        <c:forEach items="#{testBean.values}" var="value">  
            <c:if test="true">
                <test:component id="#{value}" value="#{value}">
                    <f:ajax event="click" listener="#{testBean.submit}" render=":out" />
                </test:component>
            </c:if>
        </c:forEach>
        <h:outputText value="#{testBean.text}" id="out" />
    </h:panelGroup>
</h:body>

资源/测试/component.xhtml

内容中使用的复合组件。

<composite:interface>
    <composite:attribute name="value" />
    <composite:clientBehavior name="click" event="click" targets="form:submit" default="true"/>
</composite:interface>

<composite:implementation>
    <h:form id="form" styleClass="objects">
        <h:inputText id="input" value="#{cc.attrs.value}"/>
        <h:commandButton id="submit" type="submit" value="submit"/>
    </h:form>
</composite:implementation>

com.example.TestBean

@ManagedBean(name = "testBean")
@ViewScoped
public class TestBean {

    private static final Logger LOGGER = Logger.getLogger(TestBean.class);
    private String text;
    private List<String> values;

    // Getters + Setter 

    @PostConstruct
    public void postConstruct() {
        setText("instanziated");
        setValues(new ArrayList<String>());
        getValues().add("one");
        getValues().add("two");
        LOGGER.info("TestBean initialized");
    }

    public void submit(final AjaxBehaviorEvent event) {
        LOGGER.info("executed");
        setText("executed");
    }
}

在实际应用程序中，当单击提交按钮但未调用侦听器方法时会触发 ajax 事件，但在第一次执行后一切都按预期工作，发送 ajax 请求并调用侦听器方法。这种现象会在整个页面重新加载之前发生。

更新：

根据评论中的要求，这是实际应用程序的一部分。该应用程序具有一些可拖动的元素，并且更改已提交到服务器以将更改存储在服务器端。因此，operation设置为drag隐藏输入字段。此外，这些更改被转换为 JSON，该 JSON 被设置为第二个隐藏输入value。设置这些值后，将调用提交按钮来调用 ajax 请求。

var app : {
    init : function() {
        jQuery(".objects").draggable({
            // event handling
            stop : function(event, ui) {
                // send changes to server
                app.submitDragOperation(this);
            }
        });
    },
    submitDragOperation : function(form) {
        app.setOperation(form,
            "drag",
            JSON.stringify({
                top: jQuery(form).css("top"),
                left: jQuery(form).css("left")
            })
        );
        app.submitOperation(form);
    },
    setOperation : function(form, operation, value) {

        var inputOpId = helper.fn.escapeColons("#" + jQuery(form).attr("id") + ":operation");
        var inputValId = helper.fn.escapeColons("#" + jQuery(form).attr("id") + ":value")
        jQuery(inputOpId).val(operation);
        jQuery(inputValId).val(value);
    },
    submitOperation : function(form) {
        // evaluate id of submit button
        var submitId = helper.fn.escapeColons("#" + jQuery(form).attr("id") + ":submit");
        jQuery(document).ready(function() {
            jQuery(submitId).click();
        });
    },
    submitDragOperation : function(form) {
        app.setOperation(form,
            "drag",
            JSON.stringify({
                top: jQuery(form).css("top"),
                left: jQuery(form).css("left")
            })
        );
        app.submitOperation(form);
    }
};
4

0 回答 0