How to send click event x,y coords to server?

[kristof.taveirne]

Hi,

I have a JSF/richfaces application running on jboss 5.1 and I'm stuck at something.

I have the following thing that I need to do:

I have an image on the client site, and I need to set markers on that image. The coordinates of those markers need to be stored in DB.

The problem is with getting the x,y coordinates of the click event to the backend.

What I tried is this:
h:commandButton with the image attribute pointing to a servlet which is generating the image, and an actionListener attribute where I catch the ActionEvent. The .x and .y don't seem to be transfered in Firefox. It does in IE I believe (not tested).

Now i'm trying to use mediaoutput to show the image, wrapping it with a div to call a javascript function on the onclick event, trying to get the x,y coords to be transfered to the serverside using a4j:actionparam in a a4j:jsFunction.

Everything I tried failed, and i'm kinda out of ideas.

Do you guys have something I could try to get this done?
I know it's possible ... google maps does it all the time


Thanks LOADS!!!

Kristof

[djkrite]

how bout using an onclick event to capture the x and y coordinates and once you the coordinates call a a4j:jsFunction passing the values to the backend. here's an example jsFunction component thats take two arguments:

<a4j:jsFunction name="updateXY" ajaxSingle="true" limitToList="true" action="#{backingBean.doSomething}" reRender="something">
 <a4j:actionparam name="param1" assignTo="#{backingBean.x}" />
 <a4j:actionparam name="param2" assignTo="#{backingBean.y}" />
</a4j:jsFunction>

call the function like this:

updateXY('value1', 'value2');

[alexsmirnov]

Ajax submit function has an 'event' parameter that incapsulates original dom event.
On the other side, actionParam has 'escape' attribute that tells renderer how to interpret param value. If that attribute was set to 'false', the value will be encoded as JavaScript reference.
Therefore, code like:
<a4j:actionparam name="param1" value="event.clientX" assignTo="#{backingBean.x}" escape="false" />

[kristof.taveirne]

Thanks guys!

@djkrite: I tried that, but didn't know how to get the x and y coordinates.
@alexsmirnov: worked like a charm!

BTW: the attribute is noEscape=true instead of escape=false. I understand what it does.

Again: loads of thanks!!!


Greetings,
Kristof.

[kristof.taveirne]

Hi,

While doing some intensive testing I noticed that event.clientX does not give me the x coordinate relative to the image's left upper corner but relative to the browser's content window.

This is perfect if you want to throw an ajax popup, but I can't use it to place a marker on my image.

So, I now know how to get position related data to the server, but it isn't the correct data.
What I tried to do is the following:

a4j:actionparam name="param1" value="event.clientX - document.getElementById(#{rich:clientId('myClickableImage')}).offsetLeft" assignTo="#{hsman.x}" noEscape="true" />

This however doesn't work. the assignTo doesn't do its job.

Any ideas?

thanks,

Kristof T.

[djkrite]

 function getMouseXY(e) {
 var posx = 0;
 var posy = 0;
 if (!e) var e = window.event;
 if (e.pageX || e.pageY) {
 posx = e.pageX;
 posy = e.pageY;
 } else if (e.clientX || e.clientY) {
 posx = e.clientX + document.body.scrollLeft +
 document.documentElement.scrollLeft;
 posy = e.clientY + document.body.scrollTop +
 document.documentElement.scrollTop;
 }
 return new Array(posx,posy);
 }

[kristof.taveirne]

Hi,

Thanks djkrite for helping out.

I've tried that piece of code but it gives me the coordinates relative to the page. When I take those coordinates and draw a marker on the image the marker is shifted to the right by the amound of pixels the mouse pointer is removed from the left side of the page.

My image is in a form on modalPanel btw, maybe that has something to do with it.

If I could know the absolute coordinates of the image on the page, I would subtract that amount to get the correct coordinates relative to the image, but I see no way how.

For now, I've hardcoded this. I've placed the modalPanel with the left and top attributes on a predefined location. and with moveable false I can "measure" the coordinates by clicking on the upperleft corner of the image, and then I hardcoded those values to subtract from the x,y coords i'm getting from the form. that way, for now, the marker is drawn perfectly under my mousebutton, and the correct coordinates are stored in database.

Ofcourse, this can in no way be a sollution in production mode.
Right now, I'm even thinking of rendering the image in an embedded flash application and catching the correct coordinates there.

I still can't believe that when you use a a4j:commandButton with the image attribute that it is so hard to get the x and y coordinates of the mouse click event on the button. Seems like a very basic feature to me.

k.

"djkrite" wrote:

 function getMouseXY(e) {
 var posx = 0;
 var posy = 0;
 if (!e) var e = window.event;
 if (e.pageX || e.pageY) {
 posx = e.pageX;
 posy = e.pageY;
 } else if (e.clientX || e.clientY) {
 posx = e.clientX + document.body.scrollLeft +
 document.documentElement.scrollLeft;
 posy = e.clientY + document.body.scrollTop +
 document.documentElement.scrollTop;
 }
 return new Array(posx,posy);
 }

[kristof.taveirne]

GOT IT!

This is how my commandButton looks like:

<a4j:commandButton id="levelPreviewButton" ajaxSingle="true"
 image="#{hsman.levelPreviewUrl}" action="#{hsman.addLocation}" reRender="levelPreviewButton" >
 <a4j:actionparam name="param1" value="getMouseXY(event)[0]" assignTo="#{hsman.x}" noEscape="true" />
 <a4j:actionparam name="param2" value="getMouseXY(event)[1]" assignTo="#{hsman.y}" noEscape="true"/>
</a4j:commandButton>

And this is the script i've used:

function getMouseXY(e) {

 var posx = 0;
 var posy = 0;
 var correction = new Array();
 if (!e)
 var e = window.event;
 if (!e.target) {
 e.target = e.srcElement;
 }
 correction = findPos(e.target);
 if (e.pageX || e.pageY) {
 posx = e.pageX;
 posy = e.pageY;
 } else if (e.clientX || e.clientY) {
 posx = e.clientX + document.body.scrollLeft
 + document.documentElement.scrollLeft;
 posy = e.clientY + document.body.scrollTop
 + document.documentElement.scrollTop;
 }
 return new Array(posx - correction[0], posy - correction[1]);
}

function findPos(obj) {
 var curleft = curtop = 0;
 if (obj.offsetParent) {
 do {
 curleft += obj.offsetLeft;
 curtop += obj.offsetTop;
 } while (obj = obj.offsetParent);
 }
 return [ curleft, curtop ];
}

I just use the absolute coordinates of the click event, I look up the absolute coordinates of the button and I use this as a correction to the absolute click coordinates.


Thanks for your help guys!
The sollution is a combination of all your tricks :-)