如何在rails4视图中从application.js调用js函数

Question

I am trying to call a js function that i wrote in application.js in one of my view, but for some reason the way that I am doing it is not working

My view is a form with a bootstrap modal in it. My modal has an input field on which I would like to perform autocomplete using a ruby array as the source

 <div>
  <%@users = User.all.pluck(:email)%>
  <script> 
        <%= "autoFill(@users)" %>
  </script>

  <% @users.each do |user| %>
  <p><%= user%></p>
  <% end %>

 </div>
<div class="row">

<%= form_for(@note) do |f| %>
  <% if @note.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@note.errors.count, "error") %> prohibited this note from being saved:</h2>

      <ul>
      <% @note.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :content %><br>
    <%= f.text_area :content %>
  </div>
  <div class="actions">
    <%= f.submit  %>
  </div>
  <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

<% end %>

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
 <input id="emails"></input>
   </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>


</div>

my method in application.js is( at the moment it should just do auto complete )

var autoFill = function(emailsList){

  var listOfKeys = emailsList;

    $("#emails").autocomplete({
        minLength: 2,
        source: listOfKeys,
        select: function(event,ui) { 
        if (event.keyCode ==13){ // prevent the trigger of the enter listner from the autocomplete selection.
            return false; // clear the field and cancel the focus on the autocomplete.
        }
        return false; // clear the field and cancel the focus on the autocomplete.
         }
        });
    // set enter listner
    $("#emails").keyup(function(event) {
        if (event.keyCode == 13) {
        $(emails).autocomplete("close");
        }   
    });
};

I tried to hock the view to the method in the following way that I found on several posts here

 <script> 
        <%= "autoFill(@users)" %>
  </script>

Answer 1

Make sure You have Your application.js included in Your view/layout. It's also a good idea to check Chrome/Firefox console - do You have this file downloaded and what are the contents of that file?

If You see that browser has this file and function loaded, try calling in JS console. If it's working fine, then maybe You view is calling this function too early. In those cases the simplest fix is(ensures DOM loaded first):

 <script> 
   $(function() { autoFill(<%= @users %>) });
  </script>