Question

please help with the following:(using rails 3 and jquery)
In my view i have:

<% @project.each do |pro| %>
  <a href="#", id="opendialog"><%= pro.name %></a>
  <div id="dialog">
     <%= pro.description %>
  </div>
<% end %>

In my application.js file i have:

$(function() {
    $( '#dialog' ).dialog({
        autoOpen: false,
        width: 600,
        modal: true
    });
    $('#opendialog').click(function(){
    $('#dialog').dialog('open');
    return false;
    });
});

The code executes fine for the first record found, where i am able to click on the link and the dialog box opens, however for the second and successive records returned, it does not display the dialog box. Is it possible to write the href as a link_to helper(tried with no luck).

Thanks in advance, much appreciated.

Answer 1

You’re creating multiple <div>s with the same ID, which is a violation of the HTML spec since IDs must be unique.

Try changing it to a class instead:

<% @project.each do |pro| %>
  <a href="#", class="opendialog"><%= pro.name %></a>
  <div class="dialog">
     <%= pro.description %>
  </div>
<% end %>

and

$(function() {
    $('.dialog').dialog({
        autoOpen: false,
        width: 600,
        modal: true
    });
    $('.opendialog').click(function(){
        $('.dialog').dialog('open');
        return false;
    });
});