0

Is there a way to invoke a backing bean ajax method in JSF2/Primefaces 5.x by right clicking on an image ? There is a contextMenu component in Primefaces but it brings up a menu, which I don't want.

user972391
  • 321
  • 1
  • 4
  • 20

2 Answers2

4

Using this jQuery code and PrimeFaces <p:remoteCommand> you can achieve this, here is simple code: 

<h:form>
        <p:graphicImage id="myImage" onmousedown="rmc(event)" library="img" name="myImage.png" class="RMC"/>
        <p:remoteCommand name="rightMouseClick" action="#{backingBean.method}" update="myImage"/>
</h:form>
    <script>
        $(document).on("mousedown", ".RMC", function () {
            $(".RMC").each(function () {
                this.oncontextmenu = function () {
                    return false;
                };
            })

            $(".RMC").mousedown(function (e) {
                if (e.button == 2) {
                    rightMouseClick();
                    return false;
                }
                return true;
            });
        });

        function rmc(e) {
            this.oncontextmenu = function () {
                return false;
            };

            if (e.button == 2) {
                rightMouseClick();
                return false;
            }
            return true;
        }
    </script>

It will disable right mouse menu on images with class RMC and invoke method from backing bean. If you don't want to disable the menu just remove .each() part.

EDIT: After updating DOM element, it loses events given during $(document).ready() so you have to add onmousedown event directly in component.

EDIT2: Changed $(document).ready(), now works for elements with RMC class even after update.

Community
  • 1
  • 1
Geinmachi
  • 1,251
  • 1
  • 8
  • 20
  • Thanks. I just cannot seem to find the motivation to actually create answers like this. Always wonder why people cannot think of things like this themselves. – Kukeltje Sep 14 '15 at 20:48
  • thanks @Geinmachi. Will that work only for action methods (as compared to actionListener)? I tried actionListener method (which returns void). However, it works only the first time, after the method returns, the right click function/method is not getting invoked in javascript or in the backing bean (I put console.log statements in the javascript code) – user972391 Sep 15 '15 at 17:43
  • Why do you want actionListener? – Geinmachi Sep 15 '15 at 18:52
  • The backing bean method was not getting invoked more than once. So I tried both action and actionListener and none of them are getting invoked. I even added process=@this on the remoteCommand, but both the JS function and the backing bean method are getting invoked only once. Also, even though the method is getting invoked the first time, I am still seeing the context menu. – user972391 Sep 15 '15 at 20:11
  • It invokes for me every time, maybe post whole `` – Geinmachi Sep 15 '15 at 20:19
  • I think I pinpointed the issue, I have an update attribute on the remoteCommand tag - . If I remove the update attribute, it works fine. Does it work for you if you have the update attribute to update only a part of the page? – user972391 Sep 16 '15 at 14:39
  • @user972391 Where exactly did you say that you update your image in ``? I edited my answer and now it should work. – Geinmachi Sep 16 '15 at 17:32
  • thank you, you are right, it was losing events after updating DOM. Your edit fixes it. Now I deleted the onready function completely from the Javascript (as it is redundant for the first time). – user972391 Sep 16 '15 at 18:23
  • Edited my answer again if you are interested in class event, now works even after update. – Geinmachi Sep 16 '15 at 18:28
0

Very simple… Break down your problem. Think html first. You should simply add a right click via jquery and use a p:remoteCommand to call a backingbean

Kukeltje
  • 12,223
  • 4
  • 24
  • 47