listener is never called

Question

I am new to primefaces. I am migrating from primefaces2.2 to primefaces3.1.1 because i have to include the new features of primefaces3.1.1 in application.

There was a dragndrop functionality in application. It is working fine with primefaces2.2, but when i made changes according to the specifications of primefaces3.1.1. The dragndrop functionality is not working.

Actually the scenario is like

I have a datatable where i am getting values from database and displaying. There is a treetable.

The datatable row is to be dragged and dropped on the treetable area. While doing so i have written the listener but it is never called.

Here i am providing the code

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>

and here is my workflowStep2Bean.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);
    }
}

Please tell me where i am doing wrong. Thank in advance

I am using primefaces 3.1.1, Mojorra 2.1.3, Glassfish 3.1.1, JSF2.0

I am not sure if this is the reason that drop functionality is not working, but in version 3 of PrimeFaces you now have to specify the `rowKey` attribute of the `p:dataTable` for row selection to update properly. This `rowKey` represents the bean property that uniquely identifies the bean in the `value` collection. Unfortunately the showcase neglects to show this, hopefully the Primefaces team will update it soon. You can get more information on this in the Primefaces Manual. — maple_shaft, Mar 02 '12 at 12:57
Thank you for your comment. Will you please send me the link of the primefaces manual and also the link where i can see the specifying the rowkey in datatable example — Sharath, Mar 05 '12 at 07:42
You can download it here... http://www.primefaces.org/documentation.html — maple_shaft, Mar 05 '12 at 12:23

score 0 · Answer 1 · edited May 23 '17 at 11:50

I had a similar problem which I solved in the following manner :

Having a <p:droppable> with both a onDrop="" argument and a <p:ajax ... /> command imbeded did not work.

Following the explanation given in https://stackoverflow.com/a/19223442/1431979, I first deleted the onDrop="handleDrop()" argument in my

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

and replaced it by attaching the three folowing event listeners to the ui-droppable class after page load :

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!");
    });

});

Then you shoud be able to modify the above on("drop"... function to make the ajax call using the <p:remoteCommand> command.

Hope this can help.

listener is never called

1 Answers1