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

Question

因此，当我第一次访问使用TokenInput的页面时，tokeninput永远不会访问我的输入表单。只有在我刷新页面后才有效。为什么会这样，当我最初访问页面时如何才能使它工作？

当我第一次去我的页面时。查看玩家字段。

一旦刷新

我想javascript会发生一些事情。在查看问题时，似乎整个页面加载了日期字段和复选框的正确数据。刷新后，我的令牌输入中会显示正确的数据，但我的复选框和日期的值不正确。

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

application.html

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

的application.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 %>

Answer 1

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

我不是铁路用户，但也应该在这里做类似的事情。 OP表示他将[脚本]放在[h]文件而不是application.js＆＃34;中，这就完成了这项工作。

Answer 2

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

我的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
    });
  });