在Rails的表行上多次出现jquery对话框3-我该怎么做? [英] multiple occurences of jquery dialog boxes on table rows in rails 3 - how do I do this?

问题描述

我要完成的任务:

我有一个Rails 3应用程序，该程序处理电信公司的工作订单.工作单控制器的索引页面每页最多显示30个分页的工作单.

I have a Rails 3 application that processes work orders for a telecommunications company. The index page of the work orders controller displays paginated work orders in rows of up to 30 per page.

客户端希望从此页面更新两个字段.它们是技术员预计到达时间和工作订单状态.我已经编写了一些代码来使用jquery对话框弹出窗口来提供部分表单(每个字段一个)以进行更新.

There are two fields that the client would like to be able to update from this page. They are Technician ETA and Work Order Status. I've written some code to use jquery dialog popups to serve partial forms (one for each field) for update.

到目前为止，我已经能够获得弹出窗口以服务于表单部分，但它们仅适用于第一行.页面上后续行的链接不起作用.我希望这是因为包含对局部函数调用的div必须为每一行(在这种情况下为每个工作顺序)唯一地命名.

So far I've been able to get the popups to serve the form partials but they only work for the first row. The links for subsequent rows on the page don't work. I expect that this is because the divs containing the calls to the partials have to be uniquely named for each row (each work order in this case.)

此刻，我只想解决使每一行的对话框弹出窗口迭代在前端工作的问题.这是我目前拥有的代码:

At the moment I'm only trying to address the issue of getting the iterations of dialog popups for each row to work on the front end. This is what I have for code currently:

.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(在我的索引视图中):

the divs to render the partials (in my index view):

<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>

和链接(在我的索引视图中):

and the links (in my index view):

<a href="#" id="statuslink"><%= status_display %></a>

(注意:status_display变量已正确填充)

(note: status_display variable is populated correctly)

<% if work_order.soft_completion_datetime.blank? %>
    <a href="#" id="etalink"><%= "No ETA Entered" %></a>
<% else %>
    <a href="#" id="etalink"><%= work_order.soft_completion_datetime.strftime('%m/%d/%Y %I:%M %p') %></a>
<% end %>

我在想我可以将工作订单行中的id用作每次弹出对话框时的唯一标识符，但是我不是经验丰富的jquery编码器，因此我需要更加谨慎地指出我朝着正确的方向前进.

I'm thinking I can use the id from the work order row as a unique identifier for each occurrence of the dialog pop up, but I'm not a seasoned jquery coder so I am in need of a greater mind to point me in the right direction.

推荐答案

好，所以我对这个问题有部分解决方案，但是我在使用jquery时仍然遇到一些困难.

Ok, so I have a partial solution to this problem but I'm still having some difficulty with the jquery.

要唯一标识对话框div和相应的链接，我这样做:

To uniquely identify the dialog div's and the corresponding links I did this:

关于状态:

            <% statusidname = "statuslink-" + work_order.id.to_s %>
            <%= link_to (status_display, "#", :id => statusidname, :onclick => "statusdialog('#{work_order.id.to_s}')") %>    
            <% statusdivname = "status-chg-form-" + work_order.id.to_s %>
            <%= content_tag :div, :class => statusdivname, :style =>"display:none" do %>
               <%= render :partial => 'statusform' %>
            <% end %>

以及ETA:

       <% etaidname = "etalink-" + work_order.id.to_s %>    
       <% if work_order.soft_completion_datetime.blank? %>
         <%= link_to ("No ETA Entered", "#", :id => etaidname, :onclick => "etadialog('#{work_order.id.to_s}')") %>
       <% else %>
         <%= link_to (work_order.soft_completion_datetime.strftime('%m/%d/%Y %I:%M %p'), "#", :id => etaidname, :onclick => "etadialog('#{work_order.id.to_s}')") %>
       <% end %>
       <% etadivname = "eta-chg-form-" + work_order.id.to_s %>
       <%= content_tag :div, :class => etadivname, :style =>"display:none" do %>
          <%= render :partial => 'etaform' %>
       <% end %>

总的来说，这段代码创建了名为statuslink-999和etalink-999的链接以及名为status-chg-form-999和eta-chg-form-999的div，其中999是work_order.id，从而唯一地命名每个链接和div为每一行.

In summary essentially this code creates links that are named statuslink-999 and etalink-999 and divs named status-chg-form-999 and eta-chg-form-999 where 999 is the work_order.id thereby uniquely naming each link and div for each row.

这是我的.js.目前无法正常运作.我无法弄清楚我到底在做什么错，但是脚本没有收到行标识符.

This is my .js. It is currently not working. I can't figure out what exactly I'm doing wrong here but the script is not receiving the rowid.

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

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

这篇关于在Rails的表行上多次出现jquery对话框3-我该怎么做?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！