我(有点)重新提出这个问题,这是基于前一个问题:
multiple occurences of jquery dialog boxes on table rows in rails 3 - how do I do this?
我提供的上一个链接仅供参考。
经过几个小时的努力才能完成这项工作,我决定采取一大步,重新开始,基础知识。我的背景是我非常精通rails编程,而且Javascript(jQuery)并不那么热门。
我有一个表,希望能够使用jquery对话框更新每行中的两个字段,以便部分更新它们。
我设法让对话框弹出部分内容,但仅在第一行。 点击后续行中字段的链接不会产生任何结果(它们刚刚死亡)。
这是.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'); });
});
在我的索引页面上是div,它们在各自的对话框中提供部分:
<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>
最后,这里是链接,对表格的每一行重复:
<%= link_to work_order.soft_completion_datetime.strftime('%m/%d/%Y %I:%M %p'), "#", :id => "etalink" %>
<%= link_to status_display, "#", :id => "statuslink" %>
我知道我的问题是一个补救措施,因为有些东西我只是不了解.js。如果有人能指出我正确的方向,让这些对话框以最有效的方式为表格的每一行工作,那么我将永远为你负债。
我已经坚持了几天傻了。
答案 0 :(得分:2)
1-如果您在页面上使用多个项目,请使用类而不是ID来选择要应用绑定的项目;
2-您可以将document ready
事件的2个区块合并为一个;
3-要在行中使用对话框选择div,您可以使用closest()
获得与您指定的选择器最接近的父级。
通过此更改,您的代码将如下所示:
$(document).ready(function() {
$('div.status-chg-form').dialog({ autoOpen: false });
$('.statuslink').click(function(){ $(this).closest('div.status-chg-form').dialog('open'); });
$('div.eta-chg-form').dialog({ autoOpen: false });
$('.etalink').click(function(){ $(this).closest('div.eta-chg-form').dialog('open'); });
});
答案 1 :(得分:2)
我猜你的问题是你的所有链接似乎都有id=statuslink
,你不能拥有重复的ID。如果您只是将:id
设置为:class
,那么请将jQuery更改为使用.statuslink
而不是#statuslink
,它应该修复它。对于共享相同属性的任何其他元素也是如此。