Java Primefaces p:picklist-如何捕获在目标列表中选择项目的事件?
当用户从picklist目标列表中选择一个项目时,我想重新渲染一个组件 我该怎么做Java Primefaces p:picklist-如何捕获在目标列表中选择项目的事件?,java,jsf,primefaces,picklist,Java,Jsf,Primefaces,Picklist,当用户从picklist目标列表中选择一个项目时,我想重新渲染一个组件 我该怎么做 更新(2013年12月17日) 我在这里描述了这个问题的完整解决方案- 谢谢@Hatem没有你的回答我无法解决这个问题 基本上是这样的: 我有一个@viewscope托管bean,其中有一个p:pickList,由使用p:ajax更新事件的p:selectMany组件过滤 像这样 <p:outputLabel for="siteFilter" value="Site Filter:" style="wid
更新(2013年12月17日) 我在这里描述了这个问题的完整解决方案- 谢谢@Hatem没有你的回答我无法解决这个问题 基本上是这样的: 我有一个@viewscope托管bean,其中有一个p:pickList,由使用p:ajax更新事件的p:selectMany组件过滤 像这样
<p:outputLabel for="siteFilter" value="Site Filter:" style="width:100px;"/>
<p:selectOneMenu converter="#{siteTypeConverter}" id="siteFilter" value="#{myMB.selectedSiteType}" style="width:200px;">
<f:selectItem itemLabel="Select Site Type" itemValue="#{null}" />
<f:selectItems value="#{myMB.siteTypeFilterList}" var="st" itemLabel="#{st.name}" itemValue="#{st}" />
<p:ajax update="sites" listener="#{myMB.handleSiteTypeFilterChange}" oncomplete="rebindClicks()"/>
</p:selectOneMenu>
<p:outputLabel for="sites" value="Sites:" style="width:100px;"/>
<p:pickList
widgetVar="xyzabc"
id="sites"
value="#{myMB.sites}"
var="site"
converter="#{siteConverter}"
itemLabel="#{site.siteType.name}.#{site.name}"
itemValue="#{site}" />
(...)
<p:remoteCommand name="updateCommand" action="#{myMB.updateAccounts}" update="accounts"/>
</h:form>
<h:outputScript library="js" name="pickListHack.js" />
(...)
这里的技巧似乎是,在更新事件之后,绑定丢失,因此我们必须在更新之后重新绑定它们。这就是为什么p:ajax有oncomplete事件
最后,当用户单击目标列表中的元素时,我们调用updateCommand,该命令通过p:remoteCommand声明
请注意,所选项目作为名为“param”的参数传递。我们在托管bean中得到这个参数,如下所示
public void updateAccounts(){
String value = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("param");
System.out.println(">"+value);
this.accounts = value;
}
在本例中,该值只是ID,因为我的siteConverter就是这样处理对象的
@ManagedBean
@RequestScoped
public class SiteConverter implements Converter,Serializable{
private static final long serialVersionUID = -194442504109002565L;
@EJB
private MyEJB myEJB;
@Override
public Object getAsObject(FacesContext arg0, UIComponent arg1, String arg2)
throws ConverterException {
if (arg2 != null){
Site s = myEJB.getSiteById(Long.parseLong(arg2));
return s;
}else{
return null;
}
}
@Override
public String getAsString(FacesContext arg0, UIComponent arg1, Object arg2)
throws ConverterException {
if (arg2 != null){
Site s = (Site)arg2;
return String.valueOf(s.getId());
}else{
return null;
}
}
}
这样就可以了 远程命令 编辑: 如果您的选择列表由另一个组件定期更新,那么您最终将丢失单击事件 在这种情况下,您可能希望绑定拾取列表的父容器组件上的单击 例如:
$('#formId').on('click','.ui-picklist-target li',function(){
updateCommand();//remoteCommand to update
//and you can get the item value and lable
$(this).attr('data-item-value');
$(this).attr('data-item-lable');
});
但是,如果任何其他组件更新了整个表单,您将丢失事件绑定 你的问题可能需要更多的细节。您的意思是当目标列表中突出显示某个项目时?或者在传输发生时?选择列表有两个列表,源和目标。我要查找的事件是当用户从picklist目标列表中选择一个项目时。这与传输事件不同。您甚至可以假设两个列表的两侧都带有预初始化的项,并且用户在任何传输事件(如果有)之前选择了特定的目标项。我不理解这一点。你是如何链接javascript函数和pickList的?我没有链接任何东西,因为pickList的输出是一个普通的HTML!我基于picklistcss类和特定的dom元素(例如li)做了一些操作,当单击这个元素时,这意味着它被选中了。只需在选中remoteCommand时调用它@kolossus@HatemAlimam,这个答案很有道理。尽管如此,我不知道为什么我的浏览器显示pickListVar未定义。(widgetVar不工作?)。如果我尝试从ID调用jq[例如,$(''am\\\:sites').jq.on(…)],我会得到“TypeError:$(…).jq未定义”。如果我尝试警报($('am\\:sites')$(document).ready(function(){$('#am\\\:sites')。在('click','.ui picklist source li',function(){alert($(this).attr('data-item-value'));});,对象不为null,没有引发错误消息,但没有发生任何事情:-(这很奇怪!如果您在文档中复制相同的代码,并在演示primefaces webapp(在控制台中)中执行它您将完全获得预期的结果。还有一件事,您必须确保页面中没有js错误。我的意思是页面必须没有任何js错误。请共享您的选择列表代码,以及到目前为止的js,这将有所帮助。@LeonardoKenjior您可以添加
target=“head”
对于outputScript,它也应该做到这一点。@LeonardoKenji
<p:remoteCommand name="updateCommand" update="componentId" />
<p:pickList id="pickList" widgetVar="pickListVar" value="#{pickListBean.cities}"
var="city" itemLabel="#{city}" itemValue="#{city}" />
$(document).ready(function() {
PF('pickListVar').jq.on('click','.ui-picklist-target li',function(){
updateCommand();//remoteCommand to update
//and you can get the item value and lable
$(this).attr('data-item-value');
$(this).attr('data-item-lable');
});
});
$('#formId').on('click','.ui-picklist-target li',function(){
updateCommand();//remoteCommand to update
//and you can get the item value and lable
$(this).attr('data-item-value');
$(this).attr('data-item-lable');
});