AJAX versus the DOM


#1

I have a page in development that allows the user to click on an image
then the image is updated with an icon placed where they clicked.

I can get the coordinates of my click event with the code below but, I
get them one click late. After the page loads, the first click returns
“id=”. The browser address bar appears to be current i.e. it shows the
proper coordinates as a hash. The next click returns “id=123,456” where
the numbers are the coordinates of the first click. So, the id is always
one click out of phase with the user. An inattentive user will no doubt
double post icons unless I can get the click event in phase.

As you can see below, I am using document.location.hash to get the
coordinates. Other coordinate methods like clientX, offsetX etc are
relative to the window, not the image or don’t work in all browsers.

index.rhtml

<%= link_to_remote(image_tag('blank', :id => 'map', :size => '800x880', :style => 'border: none;', :ISMAP => 'true'), :update => 'drill_map', :url => { :action => 'wait'}, :after => "new Ajax.Updater('drill_map', '/map_page/add_hole?id=' + window.location.hash.substring(2), {asynchronous:true, evalScripts:true})" ) %>
<%= image_tag(@site_image, :id => 'map', :size => '800x880', :style => 'border: none;', :ISMAP => 'false') %>

part of controller

def wait @site_image = "temp.jpg" render(:nothing => true) end