Token Input only works once i refresh the page

Question

So when i first go to a page where i use TokenInput, the tokeninput never hits my input form. Only after i refresh the page it works. Why is this and how can i make it work when i initially go the page?

When i first go to my page. Look at players field.

Once i refresh

I guess something happens to the javascript. Upon looking into the issue, it seems like the whole page loads with correct data for the date fields and checkbox. After i refresh the correct data appears in my token input as it should, but with incorrect values for my checkbox and dates.

The dates and checkbox values belongs to another roster.

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

My rosters form

<%= 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

If this was plain jQuery, then the $.tokenInput() function would need to be wrapped in $(document).ready().

I'm not a rails user, but something similar should be done here also. The OP stated he "put [the] script in [the] html file instead of application.js", which did the job.

Answer 2

@Chris is right when I put my JavaScript code into HTML page at the bottom token-input works every time.

My 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
    });
  });