2

loopj.comのjquerytokeninputプラグインを使用しています。JSファイルは次のとおりです。

$(document).ready(function() {

    // Token input plugin:

    $("#issuer").tokenInput("/issuers.json",{
        crossDomain: false,
        theme: "facebook",
        prePopulate: $("#issuer").data("pre"),
        preventDuplicates: true
    });

    $("#shareholder").tokenInput("/shareholders.json",{
        crossDomain: false,
        theme: "facebook",
        prePopulate: $("#shareholder").data("pre"),
        preventDuplicates: true
    });

});

これが私のマークアップです：

<form method="post" action="/certificates" accept-charset="UTF-8">
<input type="hidden" value="✓" name="utf8">
<input type="hidden" value="fSO/GJxIGEHLCb/zmd1B7qTwUYnGx5yyIxWTkEk/ies=" name="authenticity_token">\

  <div class="field">
    <label for="issuer">Issuer</label><br>
    <input type="text" size="30" name="certificate[issuer]" id="issuer" data-pre="[null]">
  </div>

 <div class="field">
    <label for="shareholder">Shareholder</label><br>
    <input type="text" size="30" name="certificate[shareholder]" id="shareholder" data-pre="[null]">
  </div>
</form>

私のtokenizeプラグインは機能しますが、機能し#issuerません。上部にセレクターが#shareholderあるjQueryコードを移動すると、トークン入力コードは機能しますが、他のコードでは機能しなくなります。どうすれば両方で機能させることができますか？#shareholder#shareholder

また、編集モードで同じマークアップを持つ同じフォームがある場合、つまり、data-preの代わりに有効なJSONがある場合[null]、トークン入力はこれらのフィールドの両方で機能します。

4

1 に答える 1

4

なぜそれがあなたにとってうまくいかないのか、私にはよくわかりません。通常、このスクリプトを使用して、tokenInput を複数のフィールドに追加します。

$(".token_input").each(function(){
  var el = $(this);
  el.tokenInput(el.data("url"), {
    crossDomain: false,
    theme: "facebook",
    prePopulate: el.data("pre"),
    preventDuplicates: true
  });
});

token_inputクラスおよびdata-url属性として入力フィールドに追加することが重要です。これが私がそれを行う方法です（Railsで）：

<%= f.text_field :issuer_tokens, :class => "token_input", "data-url" => "/issuers.json", "data-pre" => @certificate.issuers.map(&:attributes).to_json %>
<%= f.text_field :shareholder_tokens, :class => "token_input", "data-url" => "/shareholders.json", "data-pre" => @certificate.shareholders.map(&:attributes).to_json %>

それがうまくいくことを願っています。うまくいかない場合は、tokenInput の新しいバージョンをダウンロードしてみてください。

于 2011-07-12T10:21:29.433 に答える