How to pass mouse coordinates to backing bean when clicking on an image

Question

I have tried various methods of getting the mouse coordinates into the backing bean when a user clicks on an image. I can get the coordinates in the javascript, it then calls the ajax listener, but the parameters are not in the request.

my js:

if (!cis) var cis = {}
if (!cis.sarwinds) {
  var focusLostTimeout
  cis.sarwinds = {   
    errorHandler: function(data) { 
      alert("Error occurred during Ajax call: " + data.description) 

    },

    updateZoomValues: function(input, event) { 



       jsf.ajax.addOnError(cis.sarwinds.errorHandler)
          var offset = jQuery(input).offset();       

          jsf.ajax.request(input, event, { 
             render: "imagePan2 message",
             x: event.pageX - offset.left,
             y: event.pageY - offset.top
          })
    },

    getGraphicImageId: function(input) {
      var clientId = new String(input.name)
      var lastIndex = clientId.lastIndexOf(":")
      return clientId.substring(0, lastIndex) + ":imagePan2"
    }
  } 
}

My jsf page element:

    <h:graphicImage id="imagePan2" library="images" styleClass="wind_map" name="testImage.jpg" style="#{SarWindsImagesBean.imageStyle('testImage.jpg')}">
           <f:ajax event="click" onevent="cis.sarwinds.updateZoomValues(this, event)" listener="#{SarWindsImagesBean.zoomInClick}" render="imagePan2 message"/>
    </h:graphicImage>

My Backing bean:

    public void zoomInClick(AjaxBehaviorEvent event) {
    double width;
    double height;
    double top;
    double left;
    double mouseX;
    double mouseY;
    String fileName = "testImage";


    Map<String, String> reqParams = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
    mouseX = Double.parseDouble(reqParams.get("x"));
    mouseY = Double.parseDouble(reqParams.get("y"));


    width = imageItems.get(fileName).getImageWidth() * 1.1;
    height = imageItems.get(fileName).getImageHeight() * 1.1;

    // We need the mouse position on the image here, and we need to calculate
    top = mouseY - ((mouseY - imageItems.get(fileName).getImageTop()) * 1.1);
    left = mouseX - ((mouseX - imageItems.get(fileName).getImageLeft()) * 1.1);

    if (this.imageLock == false){

        imageItems.put(fileName, new SarWindImageItem(width, height, top, left));
    } else {
        Iterator<String> it = imageItems.keySet().iterator();
        while (it.hasNext()) {

                String key = (String)it.next();

                imageItems.put(key, new SarWindImageItem(width, height, top, left));
            }
    }
}

The reqParams are empty.

Dan

Answer 1

<input type="image"> can be typically used in this type of case. It has passed the coordinates along with the form submission since the 90s. No need for JS trickery.

If you do find to need to grab this values via JS, here's a solution:

get click coordinates from <input type='image'> via javascript

Answer 2

The way how you used jsf.ajax.request() isn't entirely right. The <f:ajax> already creates one, but then you're nesting another one in its onevent (note that the onevent is called thrice; before the request is been sent, after the response is arrived and after the HTML DOM is updated). This isn't right.

Technically, you should be calling jsf.ajax.request() in the onclick attribute instead and remove the <f:ajax> altogether. However, this basically requires replacing the <h:graphicImage> by a homebrewed UIComponent which does the request parameter collecting job in decode() method so that the appropriate model values can properly be updated.

Forget using the jsf.ajax.request() standalone. It should only be used when you're really developing a custom UIComponent wherein you perform the desired postprocessing in decode().

Plain vanilla HTML offers an <input type="image" name="foo"> for this on which the coordinates would be sent as foo.x and foo.y parameters. This works in JSF with <h:commandButton image="some.png">, however, those special parameters aren't been sent when you're using <f:ajax>. So forget this.

Your best bet would be setting hidden input values with the desired coordinates and in turn bind those hidden inputs to managed bean properties the usual way.

E.g.

<h:form>
    <h:graphicImage id="image" name="image1.png">
        <f:ajax event="click" execute="x y" listener="#{bean.listener}" />
    </h:graphicImage>
    <h:inputHidden id="x" value="#{bean.x}" />
    <h:inputHidden id="y" value="#{bean.y}" />
</h:form>

<h:outputScript>
    jQuery("img[id$=':image']").on("mousedown", function(event) {
        var $form = jQuery(this).closest("form");
        $form.find("input[id$=':x']").val(event.pageX);
        $form.find("input[id$=':y']").val(event.pageY);
    });
</h:outputScript>

(note: jQuery.on() is only available since 1.7, if you're using an older version, use jQuery.bind() instead)

with

@ManagedBean
@RequestScoped
public class Bean {

    private Integer x;
    private Integer y;

    public void listener() {
        System.out.println(x + ", " + y);
    }

    // ...
}

Note that I also fixed your incorrect way of getting the mouse position. You just returned the position of the image element itself, not the position of the mouse pointer on it.