我在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);
}
};