f:ajax的Ajax监听器仅在第一次执行时未被调用

时间:2012-10-28 16:22:28

标签: javascript jquery jsf richfaces composite-component

我在JBoss AS 6.1上使用Mojarra 2.1.13和Richfaces 4.2.3.Final执行jsf页面的ajax监听器时遇到了一个奇怪的问题。我试图在以下示例中重现该问题,但在此示例中问题不会发生

的index.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,并将其设置为第二个隐藏输入value。设置这些值后,将调用submit按钮以调用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);
    }
};

0 个答案:

没有答案