0

この質問を（一種の）再投稿しています。これは、この前の質問に基づいています。

Rails 3のテーブル行にjqueryダイアログボックスが複数出現する - どうすればいいですか?

以前のリンクは情報提供のみを目的として提供しています。

この作業を何時間も試みた後、私は大きな一歩を踏み出し、基本からやり直すことにしました。私のバックグラウンドは、Rails プログラミングにかなり習熟しており、Javascript (jQuery のようなもの) にはそれほど熱中していないということです。

テーブルがあり、jquery ダイアログを使用して各行の 2 つのフィールドを更新し、それらを更新する部分を提供できるようにしたいと考えています。

私はダイアログをパーシャルでポップアップさせることができましたが、最初の行だけでした。後続の行のフィールドへのリンクは、クリックしても何も生成されません (それらは死んでいるだけです)。

.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 に関して把握していないことがあるという点で、是正的なものであることを知っています。これらのダイアログ ボックスがテーブルの各行で最も効率的に機能するように、誰かがここで正しい方向に向けることができれば、私は永遠にあなたの借金を負うことになります.

私はこれで何日も愚かに立ち往生しています。

4

2 に答える 2

2

1- ページで複数のアイテムを使用している場合は、ID の代わりにクラスを使用してアイテムを選択し、バインディングを適用します。
2-document readyイベントの 2 つのブロックに 1 つで参加できます。
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'); }); 
});
于 2012-04-18T22:44:06.253 に答える
2

あなたの問題は、すべてのリンクに が含まれているように見え、id=statuslink重複した ID を持つことができないことだと思います。単に に設定:idし:class、jQuery を.statuslinkの代わりに使用するように変更すると#statuslink、修正されるはずです。同じプロパティを共有する他の要素についても同じです。

于 2012-04-18T22:44:38.163 に答える