0

RyanBatesのnested_formプラグインを使用するページがあります。プラグインは、あるモデルに基づくフォームと、別のモデルに属する追加のフィールドがある場合に使用されます。たとえば、カテゴリを作成するフォームがあり、同時に新しいカテゴリにアイテムを追加したい場合、フォームには、カテゴリモデルの入力フィールドと、新しいカテゴリに割り当てたいアイテムの入力フィールドが含まれます。

RyanのプラグインはjQueryを使用して、ユーザーがカテゴリに2アイテムまたは10アイテムを追加する可能性があるため、追加の入力フィールドを追加するボタンを作成します。

私の場合、レポートに人を追加しています。これは「リンク」を介して行われます。ネストされたフォームはうまく機能しますが、これらの新しい入力フィールドを自動補完できるようにする必要もあります。これを行うために、jQueryUI1.8オートコンプリートウィジェットを使用しています。それは私のアプリの他の部分でうまく機能しています。ただし、このネストされたフォームでは機能しません。

問題は、テキストフィールドを自動補完できるようにする私のjavascriptが、ドキュメントの準備ができたときに一度ロードされることであるようです。

その後、nested_formに新しいテキストフィールドを追加すると、オートコンプリートウィジェットはすでに一度読み込まれているため、これらにアタッチされません。

私は間違っている可能性がありますが、これは私の推測です。誰かが何をすべきか提案できますか？以下は私のオートコンプリートコードです（プラグインにすべて隠されているため、nested_form javascriptは表示していません。実際には変更したくありません。これが機能することを知っていれば十分であり、今度は作成する必要があります。私のオートコンプリートウィジェットはこれに対応しています）。

これはjavascriptのページです：

<script>
// origin_person auto selector
    $(function() {

    $('[id$=origin_id]').autocomplete({
    minLength: 2,
    source: '/people.json',
    focus: function(event, ui) {
        $('[id$=origin_id]').val(ui.item.person.given_name);
        return false;
    },
    select: function(event, ui) {
        $('[id$=origin_id]').val(ui.item.person.given_name);
   $('[id^=hidden_origin]').val(ui.item.person.id);
        return false;
    }
})

.data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.person.given_name + "</a>" )
        .appendTo( ul );
};
});
</script>

<!-- Start of form partial for my new report view -->

<% f.fields_for :links do |link_form| %>
  <%= link_form.text_field :origin_id %>
  <%= link_form.text_field :rcvd_id %> 

<%= link_form.link_to_remove "Remove this link" %> 

<% end %>

<%= f.link_to_add "Add a link", :links %>
<!-- The above link_to_add helper is part of the nested_form plugin. 
Using jQuery it will insert the following fields. Notice that the IDs 
are also dynamic which I am trying to connect to. -->

<!-- <input type="text" size="30" name="report[links_attributes][1278921811834][origin_id]" 
      id="report_links_attributes_1278921811834_origin_id" class="ui-autocomplete-input" 
      autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">

      <input name="link[origin_id]" id="hidden_origin_id" class="ui-autocomplete-input" 
      autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
-->

オートコンプリートを取得して新しく挿入されたテキストフィールドを取得する方法について、正しい方向に向けてください。

デール

4

2 に答える 2

1

デール、暗闇の中で突き刺すだけ。次の場合：

$(function() { $('[id$=origin_id]').autocomplete({...});

.liveこの関数はまたは.livequeryイベントで使用できますか？その場合、これにより、コードをさらに変更することなく、整合性を維持できる可能性があります。

于 2010-07-12T14:37:38.680 に答える
0

YUIを使用する:-D:-D

http://bubbling-library.com/eng/api/docs/plugins/dispatcher

または、この質問はあなたを助けるかもしれません：

jQueryにonAvailable（）関数はありますか？

于 2010-07-12T14:21:52.623 に答える