использование плагина tokeninput jquery для более чем одного ввода на странице

#jquery #ruby-on-rails #input #token #jquery-tokeninput

#jquery #ruby-on-rails #ввод #токен #jquery-tokeninput

Вопрос:

Я использую плагин jquery tokeninput от loopj.com Вот мой 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 вместо [null] имеет допустимый JSON, ввод токена работает для обоих этих полей.

Ответ №1:

Я действительно не знаю, почему у вас это не работает. Обычно я использую этот скрипт для добавления 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(amp;:attributes).to_json %>
<%= f.text_field :shareholder_tokens, :class => "token_input", "data-url" => "/shareholders.json", "data-pre" => @certificate.shareholders.map(amp;:attributes).to_json %>
  

Надеюсь, у вас это сработает. Если это не сработает, попробуйте загрузить новую версию tokenInput.

Комментарии:

1. У меня это работало долгое время назад, спасибо. Я не уверен, в чем была проблема, но я помню, что это было связано с параметром data-url в HTML-разметке.

2. @RobinBrouwer Как насчет элемента future, который будет добавлен позже?