令牌输入仅在我刷新页面后才有效

Posted 2023-05-09

【中文标题】令牌输入仅在我刷新页面后才有效

【英文标题】：Token Input only works once i refresh the page

【发布时间】：2014-05-14 03:59:16

【问题描述】：

所以当我第一次进入使用 TokenInput 的页面时，tokeninput 永远不会点击我的输入表单。只有在我刷新页面后它才能工作。为什么会这样？当我最初访问该页面时，如何让它发挥作用？

当我第一次访问我的页面时。查看玩家领域。

一旦我刷新

我猜 javascript 出了点问题。调查该问题后，似乎整个页面都加载了日期字段和复选框的正确数据。在我刷新正确的数据后，我的令牌输入中应该出现正确的数据，但我的复选框和日期的值不正确。

日期和复选框值属于另一个名册。

应用程序.html

<%= stylesheet_link_tag    "application", "token-input-facebook", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "jquery-tokeninput", "data-turbolinks-track" => true %>

应用程序.js

//= require jquery
//= require jquery_ujs
//= require bootsy
//= require turbolinks
//= require_tree .
//= require twitter/bootstrap
//= require jquery_nested_form

);

$(function() 
  $("#roster_player_tokens").tokenInput("/players.json", 
    crossDomain: false,
    prePopulate: $("#roster_player_tokens").data("pre"),
    theme: "facebook",
    propertyToSearch: "gamertag",
    hintText: "Type in a gamertag",
    searchingText: "Searching...",
    tokenLimit: 4,
    preventDuplicates: true
  );
);

我的名单表格

<%= form_for([@team, @roster]) do |f| %>
  <% if @roster.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@roster.errors.count, "error") %> prohibited this roster from being saved:</h2>
      <ul>
      <% @roster.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %>
      </ul>
    </div>
  <% end %>
  <form role="form">

    <%= f.label :current %><br>
    <%= f.check_box :current %><br>

    <%= f.label :start %><br>
    <%= f.date_select :start %><br>

    <%= f.label :end %><br>
    <%= f.date_select :end, :include_blank => true, :default => nil %><br>

  <%= f.label :player_tokens, "Players" %><br />
  <%= f.text_field :player_tokens, "data-pre" => @roster.players.map(&:attributes).to_json %><br>

  <%= f.submit :class => "btn btn-warning" %>
  </form>

<% end %>

【问题讨论】：

我完全没有使用 Rails 的经验，所以这可能无关紧要，但如果这是普通的 jQuery，那么 $.tokenInput() 函数需要包装在 $(document).ready() 中。 （如果 rails 自动执行此操作，那么这是没有用的 - 但认为值得一提。）

感谢我使用了您的示例并将我的脚本放在我的 html 文件中而不是 application.js 中，现在效果更好。因此，在第一页加载时，玩家字段和所有其他字段都是正确的。当我刷新玩家字段时是相同的（它应该，但现在其他字段更改为我之前查看的名册字段。无论如何你可以做出答案，我会接受它。谢谢

你能解释清楚吗？一个页面上是否有多个这样的表单？他们都使用相同的html ID吗？那会破坏事情...

澄清一下：“但现在其他字段更改为我之前查看的名册字段”是您失去我的地方！

你在我的图片中看到的是整个页面，它们使用相同的 ID，但是当我从一个名册转到另一个名册并刷新时，我得到的数据在刷新后不正确（只有球员字段是一样的）。我认为这是因为在 rails 4 中引入的 turbo-links，我现在正在看这个问题。 ***.com/questions/18770517/…

【参考方案1】：

如果这是普通的 jQuery，那么 $.tokenInput() 函数需要被包裹在 $(document).ready() 中。

我不是 Rails 用户，但在这里也应该做类似的事情。 OP 表示他“将 [the] 脚本放在 [the] html 文件中，而不是 application.js”，这完成了这项工作。

【参考方案2】：

当我将我的 JavaScript 代码放入 HTML 页面时，@Chris 是正确的，底部令牌输入每次都有效。

我的 ruby​​ on rails slim _form.html.slim

.form-group.row
    .offset-sm-2.col-sm-10
      = f.submit class:'btn btn-primary pull-right', value: t('event.createevent_l')

javascript:
  $(function() 
    $('#event_friend_tokens').tokenInput('/friends.json', 
      crossDomain: false,
      prePopulate: $('#event_friend_tokens').data('pre'),
      theme: 'facebook',
      preventDuplicates: true,
      minChars: 2,
      tokenLimit: 10
    );
  );