在页面上的多个输入上使用tokeninput jquery插件 [英] using tokeninput jquery plugin on more than one input on a page
问题描述
我正在使用来自loopj.com的 jquery tokeninput插件这是我的JS文件:
I'm using the jquery tokeninput plugin from loopj.com Here is my JS File:
$(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
上无效,如果我在顶部使用#shareholder
选择器移动jQuery代码,则令牌输入代码适用于#shareholder
,但停止对另一代码起作用.我如何才能对他们两个都起作用?
My tokenize plugin works on #issuer
but not #shareholder
, if i move the jQuery code with #shareholder
selector at the top the Token Input code works for the #shareholder
but stops working for the other one. How can i have it work for both of them??
此外,如果在编辑模式下我具有相同的表单和相同的标记-这表示data-pre
具有有效的JSON而不是[null]
,则令牌输入可用于这两个字段.
Also, if i have the same form with the same markup in edit mode - which means data-pre
has a valid JSON instead of [null]
, Token Input works for both of these fields.
推荐答案
我真的不知道为什么它对您不起作用.我通常使用此脚本将tokenInput添加到多个字段:
I don't really know why it doesn't work for you. I usually use this script to add tokenInput to multiple fields:
$(".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中):
It's important to add token_input
as a class and a data-url
attribute to the input fields. Here's how I'd do it (in 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.
Hope it works for you. If it doesn't work, try downloading a new version of tokenInput.
这篇关于在页面上的多个输入上使用tokeninput jquery插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!