0

我试图在我的一个视图中调用我在 application.js 中编写的 js 函数，但由于某种原因，我这样做的方式不起作用

我的观点是一个带有引导模式的表单。我的模式有一个输入字段，我想使用 ruby​​ 数组作为源来执行自动完成

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

我在 application.js 中的方法是（目前它应该只是自动完成）

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

我尝试按照我在此处的几篇文章中找到的以下方式将视图添加到该方法

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

1 回答 1

0

确保您的视图/布局中包含您的 application.js。检查 Chrome/Firefox 控制台也是一个好主意 - 您是否已下载此文件以及该文件的内容是什么？

如果您看到浏览器已加载此文件和函数，请尝试在 JS 控制台中调用。如果它工作正常，那么也许你视图调用这个函数太早了。在这些情况下，最简单的解决方法是（确保首先加载 DOM）：

 <script> 
   $(function() { autoFill(<%= @users %>) });
  </script>
于 2013-10-12T17:55:32.490 回答