OrderList event not triggered?

Question

I am trying to use OrderList from PrimeFaces v 3.5 libarary.

<p:orderList 
    id="outputMapId" 
    value="#{JobMgmtBean.selectedStreamNames}" 
    var="stream" 
    valueChangeListener="#{JobMgmtBean.listenerListChanged}" 
    controlsLocation="none" 
    itemLabel="#{stream}" 
    itemValue="#{stream}">
 </p:orderList>

and

public void listenerListChanged( )
{
    ..
}

I can't seem to be getting a value change event after I drag&drop the items, listenerListChanged is never executed. What am I doing wrong?

Edit: Trying this script:

<h:head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
<title>#{txt.TXT_TITLE_TRANSCODING}</title>
<link rel="stylesheet" type="text/css" href="scripts/styles.css"/>
<link rel="shortcut icon" href="./images/favicon.ico"></link>
<script src="./scripts/scripts.js" type="text/javascript"/>

<script>
$(document).ready(function() {
        console.log("Entered script!");
        var isDragging = false;
        $(".ui-orderlist-item")
        .mousedown(function () {
            $(window).mousemove(function () {
                isDragging = true;
                        console.log("Mouse down!");
            });
         })
         .mouseup(function () {
             var wasDragging = isDragging;
             isDragging = false;
                     console.log("Mouse up!");
             triggerBackEnd();
          }); 
    }); 
</script>
</h:head>
    <h:body>
    <f:view>
    <h:form>
        <p:remoteCommand name="triggerBackEnd" actionListener="#{JobMgmtBean.listenerListChanged}"></p:remoteCommand>
    ...

But this still does not work. I never get console.log("Mouse down!");.

I am using jQuery v1.8.3 which comes with PrimeFaces 3.5.0.

Thanks. Just tried it and still doesn't work. (Edited the code above too.) — Danijel, Nov 05 '13 at 17:17
You do have all necessary getter&setters and set your bean to view scoped right? — Ömer Faruk Almalı, Nov 05 '13 at 19:11

score 3 · Answer 1 · edited May 23 '17 at 11:57

3

Obviously this is a known bug. valueChangeListener property of p:orderList currently not working. So I decided to get it work via javascript and inspired from that answer.

When you investigate generated html code of p:orderList you see there are list items which has css class of .ui-orderlist-item. So; thanks to jQuery you can detect drag or drop events easily:

$(function () {
    var isDragging = false;
    $(".ui-orderlist-item")
    .mousedown(function () {
        $(window).mousemove(function () {
            isDragging = true;
        });
     })
     .mouseup(function () {
         var wasDragging = isDragging;
         isDragging = false;
         triggerBackend();
      }); 
 });

What we've done is: calling triggerBackend() which is going to refer a p:remoteCommand when our list item dropped. If you want to detect drag event you should consider mousedown which requires a bit more coding.

Then triggerBackend():

<p:remoteCommand name="triggerBackEnd" action="#{JobMgmtBean.listenerListChanged}"></p:remoteCommand>

It works at me PF 3.5, jQuery 1.8.3

edited May 23 '17 at 11:57

Community

1
1

answered Nov 06 '13 at 13:01

Ömer Faruk Almalı

3,792
6
37
63

Just trying it, doesn't work, no events triggered. Could you review your code? – Danijel Nov 07 '13 at 15:20
@Danijel It works like a charm. You can debug it, put a `console.log("sth.");` right before the `triggerBackend();`. Then check your browser's console if "sth." has written so js is working, you need to put a breakpoint into backing bean and see your method is called or not. – Ömer Faruk Almalı Nov 07 '13 at 15:35
Thanks. There is a breakpoing, but it's never hit. Let me try `console`... My first steps in jQuery, sorry. – Danijel Nov 07 '13 at 15:40
No, it doesn't print anything to console. :-( It's like the script is never executed? I just checked the item name, and it seems to be correct: `ui-orderlist-item`. Hm... – Danijel Nov 07 '13 at 15:43
I added some console.logs and now I see `$(function)` is executed only once, on page load. How do I get this to execute when I click and/or move the mouse? – Danijel Nov 07 '13 at 15:49
I got my JSF project at work computer so I am going to help you tomorrow, but I guess you are putting js code into somewhere wrong. Try to put your code inside this: `$(document).ready(function() { // put all your jQuery goodness in here. });` – Ömer Faruk Almalı Nov 07 '13 at 16:37
Thanks. Tried it, but still the same. I fail to understand: when is this script executed? What's the mechanism. – Danijel Nov 08 '13 at 11:54
Edited the question, please have a look. – Danijel Nov 08 '13 at 12:01
@Danijel insert `type="text/javascript"` in your script tag. And can you try to move script tag right after the `p:orderList` – Ömer Faruk Almalı Nov 08 '13 at 12:27
Tried it - it didn't help. – Danijel Nov 08 '13 at 13:32
@Danijel can you try that inside of another page with a single `p:orderList`. Also you can debug script via Firefox's firebug plugin. Maybe sth. in your page violates that but I really can not see any cause to that case. – Ömer Faruk Almalı Nov 08 '13 at 13:55

OrderList event not triggered?

1 Answers1