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.

enter image description here

Once i refresh

enter image description here

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

I have no experience with rails at all, so this may not be relevant, but if this was plain jQuery, then the `$.tokenInput()` function would need to be wrapped in `$(document).ready()`. (If rails does this automagically, then this is of no use - but thought it was worth a mention.) — Chris, Apr 03 '14 at 13:14
Thanks i used your example and put my script in my html file instead of application.js and it works better now. So the players field and all the other fields are correct on first page load. When i refresh the players field is the same (which it should, but now the other fields change to the rosters field that i was previously looking at. Anyways you can make an answer and i will accept it. Thanks — Pierre, Apr 03 '14 at 16:55
Can you explain better? Do you have multiple of these forms on a page? Do they all use the same html ID? That would break things... — Chris, Apr 03 '14 at 17:00
To clarify: "but now the other fields change to the rosters field that i was previously looking at" is where you've lost me! — Chris, Apr 03 '14 at 17:06
What you see in my images is the whole page, they use the same ID, but when i go from one roster to another and i refresh, i get data which is incorrect after refresh (only players field is the same). I think its because of turbo-links which was introduced in rails 4, im looking at this question right now. http://stackoverflow.com/questions/18770517/rails-4-how-to-use-document-ready-with-turbo-links — Pierre, Apr 03 '14 at 17:06
Oh, I understand! Yes, that sounds like a Rails related problem...and that I really can't help with, apologies. — Chris, Apr 03 '14 at 17:08

score 1 · Accepted Answer · answered Apr 03 '14 at 16:59

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.

score 0 · Answer 2 · answered Nov 19 '17 at 10:17

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

Token Input only works once i refresh the page

2 Answers2