Jquery UI Dialog modal-form doesn't shows up inside table

Question

Jquery UI Dialog modal-form doesn't shows up inside table, but works fine outside.

This is haml code which doesn't works, the last line is for modal-form call:

  %table
    %thead
      %th= "gravatar"
      %th= "description"
      %th= "add tag"
    %tbody
      - @watched_repos.each do |repo|
        %tr.row
          %td.gravatar
            = image_tag("#{repo.avatar_url}", :height => '36', :width => '36')
          %td= repo.description
          %td= link_to "Add tag", tagging_path, :id => 'add-tag'

If I just put = link_to "Add tag", tagging_path, :id => 'add-tag' outside table (on top), works fine... :-(

The link_to helper call the following Jquery code in public/javascripts/application.js:

$(document).ready(function() {
  $('#add-tag').click(function(e) {
    var url = $(this).attr('href');
    var dialog_form = $('<div id="dialog-form">Loading form...</div>').dialog({
      autoOpen: false,
      width: 520,
      modal: true,
      open: function() {
        return $(this).load(url + ' #tagging');
      }
    });
    dialog_form.dialog('open');
    e.preventDefault();
  });
});

UPDATE it seems is not a "table nesting" issue, but UI Dialog "state/event" matter, infact to broke the modal-form functionality is enough put two identical links, even if outside table:

  <td><a href="/tagging" class="button icon tag" id="add-tag" type="submit">Add tag</a></td>
  <td><a href="/tagging" class="button icon tag" id="add-tag" type="submit">Add tag</a></td>
  <br>

  <table>
    <thead>
      <th>gravatar</th>
      <th>repo</th>
      <th>add tag</th>
    </thead>
    <tbody>
      <tr class='row'>
        <td class='gravatar'>
        ...

the first is hijack by Jquery the second it is not... any help?

Thanks in advance Luca

Answer 1

There should only be one ID in an HTML DOM tree. jQuery UI Dialog may well assume there is only one element in this selector: $('#add-tag') , which is probably the case. A quick fix is to change your selector to $('.button.icon.tag') .

To better resolve this problem, you should make the ID a class and change the selector to $('.add-tag') . eg

<td><a href="/tagging" class="button icon tag add-tag" type="submit">Add tag</a></td>

And change the selector:

$('.add-tag').click(function(e) {
  ...
});