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;
});
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;
});