0

私が達成しようとしているタスク：

通信会社の作業指示書を処理する Rails 3 アプリケーションがあります。作業指示書コントローラーのインデックス ページには、ページ分割された作業指示書が 1 ページあたり最大 30 行で表示されます。

クライアントがこのページから更新できるようにしたいフィールドが 2 つあります。これらは、技術者 ETAと作業指示ステータスです。jquery ダイアログ ポップアップを使用して部分的なフォーム (フィールドごとに 1 つ) を更新用に提供するコードをいくつか書きました。

これまでのところ、フォームのパーシャルを提供するポップアップを取得できましたが、それらは最初の行でのみ機能します。ページの後続の行へのリンクが機能しません。これは、パーシャルへの呼び出しを含む div が各行 (この場合は各作業指示書) に対して一意に名前を付ける必要があるためだと思います。

現時点では、各行のダイアログ ポップアップの反復をフロント エンドで動作させるという問題に対処しようとしているだけです。これは私が現在コードのために持っているものです:

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

およびリンク（私のインデックスビュー内）：

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

(注: status_display 変数は正しく設定されています)

<% 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コーダーではないので、正しい方向。

4

1 に答える 1

0

わかりましたので、この問題の部分的な解決策はありますが、jquery にはまだ問題があります。

ダイアログ div と対応するリンクを一意に識別するために、次のようにしました。

ステータス:

            <% 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 に一意の名前を付けます各行。

これは私の.jsです。現在動作していません。ここで何が間違っているのか正確にはわかりませんが、スクリプトは行 ID を受け取っていません。

$(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'); });
});
于 2012-04-14T21:15:00.987 に答える