how to control popup with ruby on rails, mouse roll-over - ruby-on-rails

Question

I have an application where user can see a list of cells. For each cell the user can see two images of the cell as popup menu. The problem is that all images are downloaded when a list is selected and that makes my page very slow.
I would like that the image is downloaded only if mouse is rolled-over the link.
For information: I’m using DOM popup kit link text
Here the main page and link to popup menu
<div id="span_div">
<span id="cell_link_<%= #cell.cellid %>" class="popup_link" Popup.modal = true><%= #cell.cellname%>
<%= render :partial => 'cell_popup' %>
<%= javascript_tag "new Popup('cell_popup_#{#cell.cellid}','cell_link_#{#cell.cellid}')" %>
</span>
</div>
Here a partial for cell images
<div id="cell_popup_<%= #cell.cellid %>" class="popup popup_draghandle" style="display:none">
<table width="418" border="0">
<tr>
<td width="201" align="center" valign="top">Raw</td>
<td width="201" align="center" valign="top">Repaired</td>
</tr>
<tr>
<td align="center" valign="top">
<% if #full_report == true then%>
<%raw_morph = #raw_morph.last%>
<img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer',:morph_id => raw_morph.morphologyid)%>" alt="" width="200" height="200"/>
<%end%>
</td>
<td align="center" valign="top">
<%if #repaired == true then%>
<%repaired_morph = #repaired_morph.last%>
<img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer', :morph_id => repaired_morph.morphologyid)%>" alt="" width="200" height="200"/>
</td>
</tr>
<%end%>
</table>
Anyone have any idea to do that?

Answer 1

Essentially the idea is to create an on mouseover action for your span that loads the images with an AJAX request. We'll use a cache variable to ensure that you aren't making the same request multiple times in a for one page load.
The following assumes Prototype. I haven't time to test it, so don't expect a flawless example.
Most of the work is done by adding an on mouseover attribute to the span.
<span id="cell_link_<%= #cell.cellid %>" class="popup_link" Popup.modal = true
onmouseover="<%=remote_function(:update => "cell_popup_#{#cell.cellid}",
:url =>
popup_cell_url(#cell, :full_report => #full_report, :repaired => #repared),
:success => "cell_#{#cell.cellid}_loaded = true",
:conditions => "cell_#{#cell.cellid}_loaded == false") %>"
><%= #cell.cellname%>
Now to clean things up:
Move everything in the partial but the div to a view called cell. Fill the void with a generic Fetching images message.
So your partial now looks like:
<div id="cell_popup_<%= #cell.cellid %>" class="popup popup_draghandle" style="display:none">
Fetching images. Please stand by.
</div>
And your new view called popup looks like:
<table width="418" border="0">
<tr>
<td width="201" align="center" valign="top">Raw</td>
<td width="201" align="center" valign="top">Repaired</td>
</tr>
<tr>
<td align="center" valign="top">
<% if #full_report == true then%>
<%raw_morph = #raw_morph.last%>
<img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer',:morph_id => raw_morph.morphologyid)%>" alt="" width="200" height="200"/>
<%end%>
</td>
<td align="center" valign="top">
<%if #repaired == true then%>
<%repaired_morph = #repaired_morph.last%>
<img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer', :morph_id => repaired_morph.morphologyid)%>" alt="" width="200" height="200"/>
<%end%>
</td>
</tr>
</table>
Now all that's left is to connect the controller to the new view and prepare it for AJAX.
Add a popup route responding to get for the cell controller.
map.resources :cells, :member => {:popup => :post}
Add the action to the CellsController
def popup
# sets #cell, #repaired, #full_report, #raw_morph,
# #repaired_morph and anything else needed by the popup view.
end