【发布时间】：2014-03-21 13:04:36
【问题描述】：
我正在使用 Mojarra JSF 2.1.28 和 Primefaces 3.5。我想为p:pickList 组件实现客户端传输输入，用户在其中键入内容并通过可用元素列表中的标签搜索值，然后将其传输到目标列表。这就是我的代码的样子：
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head />
<h:body>
<script>
//Just for testing, transfer the second element
//to the target list when document is ready. Works well
$(document).ready(function(string) {
transfer("name2");
});
//Transfer function. It takes each list item from the source list and checks if it matches with the given pattern
//If it does, moves it to the target list
function transfer(string) {
$(".ui-picklist-source li").each(function() {
var re = new RegExp(string);
if ($(this).attr('data-item-label').match(re)) {
$(".ui-picklist-target").append($(this));
}
});
};
</script>
<h:form>
<p:inputText
onkeypress="if (event.keyCode == 13) { transfer(this.value); return false;}" />
</h:form>
<h:form id="form">
<p:pickList value="#{bean.elements}" var="element"
itemLabel="#{element.name}" itemValue="#{element.name}" id="picklist" />
<p:commandButton value="Send" action="#{bean.send}" />
</h:form>
</h:body>
</html>
@ManagedBean
@ViewScoped
public class Bean implements Serializable{
public class Element {
private String name;
public Element(String n) {
name = n;
}
public String getName() {
return name;
}
@Override
public String toString() {
return "Element [name=" + name + "]";
}
}
private DualListModel<Element> elements;
public Bean() {
List<Element> source = new ArrayList<Bean.Element>();
List<Element> target = new ArrayList<Bean.Element>();
source.add(new Element("name1"));
source.add(new Element("name2"));
elements = new DualListModel<Bean.Element>(source, target);
}
public DualListModel<Element> getElements() {
return elements;
}
public void send() {
System.out.println("Available: " + elements.getSource() + " assigned: "
+ elements.getTarget());
}
public void setElements(DualListModel<Element> elements) {
this.elements = elements;
}
}
好吧，在这个测试用例中，有两个项目可供使用，name1 和 name2。当页面加载时，我使用$(document).ready() 调用我的transfer(string) 函数，以便将name2 移动到目标列表。页面被正确加载，如果我们点击Send 按钮，我们会正确分配第二个元素。
使用p:inputText 组件调用函数时出现问题。在这里，我们监听 Enter 键事件以发送当前给定值并执行传输。在客户端它工作得足够公平，它的行为符合预期。但是，当点击Send 时，模型不会在服务器端正确更新。
我推断这是由JSF保存的视图状态引起的，但是如何处理呢？有没有办法实现它还是我必须坚持 Ajax 请求？
【问题讨论】：
标签： javascript jquery jsf jsf-2 primefaces