Question

I’m (sort of) reposting this question, which is based on this previous question:

multiple occurences of jquery dialog boxes on table rows in rails 3 – how do I do this?

I’m providing the previous link for informational purposes only.

After many hours of trying to make this work, I decided to take a huge step back and start over, with the basics. My background is that I’m fairly proficient at rails programming, and not so hot at Javascript (a la jQuery.)

I have a table and wish to be able to update two fields in each row using a jquery dialog to serve a partial to update them.

I’ve managed to get the dialogs to pop up with the partials but only on the first row. The links to the fields on subsequent rows yield nothing when they’re clicked (they’re just dead).

Here is the .js:

$(document).ready(function() {
$('div#status-chg-form').dialog({ autoOpen: false });
$('#statuslink').click(function(){ $('div#status-chg-form').dialog('open'); });
});

$(document).ready(function() {
$('div#eta-chg-form').dialog({ autoOpen: false });
$('#etalink').click(function(){ $('div#eta-chg-form').dialog('open'); });
});

And on my index page are the divs to serve the partials in their respective dialog boxes:

<div id="status-chg-form" title="CHANGE WORK ORDER STATUS" style="display:none"><%= render :partial => 'statusform' %></div>
<div id="eta-chg-form" title="CHANGE TECHNICIAN ETA" style="display:none"><%= render :partial => 'etaform' %></div>

Finally, here are the links, which are repeated for each row of the table:

        <%= link_to work_order.soft_completion_datetime.strftime('%m/%d/%Y %I:%M %p'), "#", :id => "etalink" %>
        <%= link_to status_display, "#", :id => "statuslink" %> 

I know my problem is a remedial one in that there’s something I’m just not grasping with regard to the .js. If anyone can point me in the right direction here to get these dialog boxes working for each row of the table in the most efficient way I would be forever in your debt.

I’ve been stuck on stupid for days over this.

Answer 1

I’m guessing your problem is that all of your links appear to have id=statuslink, and you can’t have duplicate ID’s. If you simply set :id to :class, then change the jQuery to use .statuslink instead of #statuslink, it should fix it. Same for any other elements that share the same properties.