Using JQuerys Dialog multiple times in a rails loop

Question

I have the following rails code in a loop that has a link for a jquery dialog.

('report_image' in this link is a helper method that simply calls an image.)

<%= link_to report_image, "#", :class => "flight_report_opener" %>
  <div id="flight_report_dialog" title=" FLIGHTS REPORT">
    <p>Dialog content</p>
  </div>
<% end %>

The problem, of course, is that this generates multiple instance of id="flight_report_dialog" on the same page...which breaks the .dialog calls. Can't use classes either. I tried to change the id to be dynamically generated by adding the id generated by the loop (@ratings.each do |rating|) to the end of the dialog div css id. Then pass that through a named function call in a link_to_function.

<div id="flight_report_dialog_<%= rating %>" title=" FLIGHTS REPORT"> %> </div>

That didnt work out for me either.

I feel like Im having a brain fart here. Hoping someone might be able to help me get this solved.

How do I call the jquery dialog function multiple times on the same page from dynamically generated links.

The function I am currently using is this...which of course doesn't work. Actually, just to be clear, the function works fine...on the first instance of the id called:

$("#flight_report_opener").click(
     function() { $( "#flight_report_dialog" ).dialog( "open" ); 
     return false; 
});

Answer 1

Here is what I did to solve this. You can piece this code in to the code above...

IN THE VIEW:

<%= link_to report_image, "#", :class => "ground_report_opener", :data => {rating: rating.id} %>
<div class="ground_report_dialog" id="ground_report_dialog_<%= rating.id %>" title=" GROUND REPORT">

IN THE JS:

$(".flight_report_opener").click(function() { 
$( "#flight_report_dialog_"+$('.flight_report_opener').data('rating') ).dialog( "open" ); 
return false; 
});