AJAX: Image click coordinates

How to get the coordinates of a click on an image?

[GeoffL]

I'd appreciate some help with a form I'm trying to put together. Part of the form is a tiled map that can be scrolled and zoomed. Right now, I've got each tile as an input of type image, so when the form is submitted the post variables contain tile_x and tile_y values. However, it's a large form and I'd rather use AJAX to handle the mapping...

... Unfortunately, I can't find a reliable, cross-browser way to obtain the click coordinates to pass to an XMLHTTP Request and so any help you can give will be gratefully received.

Geoff

[GeoffL]

Sorry to reply to my own post, but I suspect I've solved my question by using JQuery. The form has id 'main' and the script I'm using to handle this is:

 $(document).ready(function(){
 $("#main :image").click(function(event) {
  var oPos = $(this).position();
  var xloc = event.pageX - oPos.left;
  var yloc = event.pageY - oPos.top;
   // etc...
 });
 });

Unfortunately, the AJAX call only works once and the second click on an image tile, pan or zoom control submits the form. I'm using the same PHP to generate the div content both initially and on execution of the AJAX call. So I'm not sure why it doesn't work more than for a single click ... but I suspect that's another story.

Best regards,

Geoff

[daveVk]

This sets the onclick handler for image(s) that exist on initial page load, but not images loaded via ajax.

After loading the Ajax content you need to repeat $("#main :image").click( ..., to set event handler on new images. Change $("#main :image") is need be to just included newly loaded images.

see [docs.jquery.com...]

Alternately you could use delegate, I have never used it but sounds suitable.

.delegate()

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

[GeoffL]

Many thanks for the pointer. TBH, I had my suspicions along similar lines and had intended to investigate in that direction when I got some time to spend on it.

That said, .delegate() does at first glance seem to be a magic bullet wherever AJAX overwrites the content bound to the trigger event.

Many thanks again,

Geoff

[GeoffL]

I've now resolved the 'once only' issue, so I'm posting my solution for completeness. After searching for .delegate(), I spotted something that seems to do the job more easily. This is .live(). The docs say that this attaches the handler to a special object at the root of the DOM that effectively binds the handler to each current or future object that matches the selector, but since in this case I have one, very large form that takes up about 90% of the DOM anyway it seems a small overhead compared with delegating the handler to the parent form. Anyway, my code:

 $(document).ready(function(){
 $("#main :image").live('click', function(event) {
 var oPos = $(this).position();
 var xloc = event.pageX - oPos.left;
 var yloc = event.pageY - oPos.top;
 // etc...
 });
 });

Thanks again for the help,

Geoff