<p:ajax> 监听器永远不会被调用答案

【问题标题】：<p:ajax> listener is never called<p:ajax> 监听器永远不会被调用
【发布时间】：2012-03-20 18:07:47
【问题描述】：

我是 primefaces 的新手。我正在从 primefaces2.2 迁移到 primefaces3.1.1，因为我必须在应用程序中包含 primefaces3.1.1 的新功能。

应用程序中有一个拖放功能。它在 primefaces2.2 上运行良好，但是当我根据 primefaces3.1.1 的规范进行更改时。拖放功能不起作用。

其实剧情是这样的

我有一个数据表，我从数据库中获取值并显示。有一个树表。

数据表行将被拖放到树表区域。在这样做的同时，我已经编写了监听器，但它从未被调用过。

这里我提供代码

workflow.xhtml

 <p:fieldset  id="workflowtabs" legend="Drop here" rendered="#{workflowStep2Bean.childCount gt 0}">
   <p:outputPanel id="dropArea">
<p:treeTable id="testtable" value="#{workflowStep2Bean.root}"  var="selected" rendered="#{not empty workflowStep2Bean.root}" >
                                                            <p:column rendered="#{selected.type eq 'Folder'}">
                                                                <p:commandButton icon="ui-icon ui-icon-folder-open" disabled="true"/>
                                                            </p:column>                                                                
                                                            <p:column rendered="#{selected.type eq 'Folder'}" >
                                                                <h:inputText value="#{selected.name}" />                                                                        
                                                            </p:column>                                                                  
                                                        </p:treeTable>
                                                    </p:outputPanel>      
                                                </p:fieldset>  
<p:fieldset  id="testfields" legend="#{msg.tests}" rendered="#{workflowStep2Bean.childCount gt 0}">
                                                    <p:dataTable id="teststable" value="#{workflowStep2Bean.tests}" var="testList"  >
                                                        <p:column style="height: 20px" headerText="Drag">
                                                            <h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4"/>
                                                            <p:draggable for="dragIcon" revert="true" scope="#{dragIcon.position}" stack=".ui-icon ui-icon-arrow-4"/>                                                                
                                                        </p:column>                                                           
                                                        <p:column headerText="Name">
                                                            <h:outputText value="#{testList.name}"></h:outputText>
                                                        </p:column>                                                                            
                                                    </p:dataTable>                                                                                                                                                   
                                                </p:fieldset>
<p:droppable for="workflowtabs" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="teststable" onDrop="handleDrop">  
                                            <p:ajax  listener="#{workflowStep2Bean.onTestDrop}" update="dropArea teststable" />  
                                    </p:droppable>

这是我的工作流程Step2Bean.java

public void onTestDrop(DragDropEvent ddEvent) {
    if (getTabs().size() > 0) {
        TreeNode tab = getTabs().get(getTabs().size() - 1);
        Test t = (Test) ddEvent.getData();
        tests.remove(t);
        ((Tab) tab.getData()).getTests().add(t);
        TreeNode tabC = new DefaultTreeNode(t, tab);
    }
}

请告诉我哪里做错了。提前致谢

我正在使用 primefaces 3.1.1、Mojorra 2.1.3、Glassfish 3.1.1、JSF2.0

【问题讨论】：

我不确定这是否是删除功能不起作用的原因，但在 PrimeFaces 的第 3 版中，您现在必须指定 p:dataTable 的 rowKey 属性才能更新行选择适当地。这个rowKey 表示唯一标识value 集合中的bean 的bean 属性。不幸的是，展示忽略了这一点，希望 Primefaces 团队能尽快更新它。您可以在 Primefaces 手册中获得更多信息。
感谢您的评论。请您给我发送 primefaces 手册的链接以及我可以看到在数据表示例中指定行键的链接
你可以在这里下载...primefaces.org/documentation.html

标签： jsf-2 primefaces

【解决方案1】：

我遇到了类似的问题，我通过以下方式解决了：

同时具有 onDrop="" 参数和 <p:ajax ... /> 嵌入命令的 <p:droppable> 不起作用。

按照https://stackoverflow.com/a/19223442/1431979中给出的解释，我首先在我的

中删除了onDrop="handleDrop()"参数

<p:droppable for="PD" accept=".#{item.classeInverse}" onDrop="handelDrop()" />

并通过在页面加载后将以下三个事件侦听器附加到 ui-droppable 类来替换它：

jQuery(window).load(function(){

    $(".ui-droppable").on("dragover", function() {
        event.preventDefault();
        event.stopPropagation();
        $(this).addClass('dragging');
    });

    $(".ui-droppable").on("dragleave", function() {
        event.preventDefault();
        event.stopPropagation();
        $(this).removeClass('dragging');
    });

    $(".ui-droppable").on("drop", function(event) {
        event.preventDefault();
        event.stopPropagation();
        console.log("Dropped!");
    });

});

那么你应该可以修改上面的on("drop"...函数来使用<p:remoteCommand>命令进行ajax调用。

希望这能有所帮助。

【讨论】：