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

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