Question

背景：我正在创建一个wiki克隆，用户可以创建wiki。用户还可以添加作为其他用户的协作者，以便为wiki做出贡献。

当我通过点击链接到达该页面时，我遇到了javascript问题。当我重新加载这个相同的页面时，javascript工作。大多数javascript用于自动完成搜索功能，该功能在页面底部呈现与键入搜索框中的字母匹配的用户名。

在我的功能中，我在show＃wikis视图上有一个链接，链接到编辑#wikis视图，如下所示：

 #views/wikis/show.html.erb
 <%= link_to "Edit", edit_wiki_path(@wiki), class: "btn btn-success" %>

点击链接并显示编辑＃wikis页面后，页面会加载，但javascript和ajax调用不起作用。 views/wikis/edit.html.erb页面位于下方，但是使用大多数ajax的代码的重要部分是底层协作者的部分形式：

    <h1>Edit Wiki</h1>

 <div class="row">
   <div class="col-md-4">
     <p>Guidelines for Wikis</p>
     <ul>
       <li>Make sure the it rhymes.</li>
       <li>Don't use the letter "A".</li>
       <li>The incessant use of hashtags will get you banned.</li>
     </ul>
   </div>
   <div class="col-md-8">
     <%= form_for @wiki do |f| %>
       <div class="form-group">
         <%= f.label :title %>
         <%= f.text_field :title, class: 'form-control', placeholder: "Enter post title" %>
       </div>
       <div class="form-group">
         <%= f.label :body %>
         <%= f.text_area :body, rows: 20, class: 'form-control', placeholder: "Enter post body" %>
       </div>
       <%if policy(@wiki).edit_form_settings? %>
         <div class="form-group">
          <%= f.label :public, class: 'checkbox' do %>
            <%= f.check_box :public %> Public wiki
          <% end %>
        </div>
      <% end %>
       <div class="form-group">
         <%= f.submit "Save", class: 'btn btn-success' %>
       </div>
     <% end %>
   </div>
 </div>
<%if policy(@wiki).edit_form_settings? %>
 <%= render partial: "collaborations/new", locals: { wiki: @wiki, collaboration: @collaboration} %>
<% end %>

下面列出了views/collaborations/_new.html.erb部分的表单：

<%= form_for [wiki, collaboration] do |f|%>

<div class = "col-md-8">

    <div class = "form-group">
      <%= f.label :user_name %>
      <%= f.text_field :user_name, class: 'form-control', placeholder: "Enter name"  %>
    </div>
    <%= f.hidden_field :user_id %>
    <div class = "form-group">
      <%= f.submit class: 'btn btn-success' %>
    </div>
  </div>

    <div id="user_data" class="dropdown">
  <ul class="list-group" style= "width:50%">
    <!-- <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li> -->
  </ul>
</div>

</div>

  </div>

</div>
<%end%>

我在assets/javascripts/collaborations.js.erb文件中有javascript：

$(document).ready(function()
{


     $('#collaboration_user_name').on('keyup', function() { 

      text = $(this).val();
      // alert(text);

      $.ajax({ url: "/collaborations?collaboration="+text, 
        beforeSend: function( xhr ) { 
          xhr.overrideMimeType( "text/plain; charset=x-user-defined" ); 
        } 
      }).done(function( data ) {
        console.log( "data:", data ); 
        users = JSON.parse(data);

        $("#user_data ul li").remove();
        $.each( users, function( index, value ) {
          $("#user_data ul").append("<li class='list-group-item' value ="+ users[index].id+">"+users[index].name+ ", " +users[index].email+ "</li>"); 
        });
      <% @user = "data" %>;
        $("#user_data").append(JSON.parse(data).name);
        $(' .list-group-item').click(function() {
        //alert( $(this).val() );
            $('#collaboration_user_name').val($(this).text().split(",")[0]);
           $('#collaboration_user_id').val($(this).val());
      });
    });
 });


});

最后，ajax在collaboration_search中调用的控制器操作为controllers/collaborations_controller.rb：

class CollaborationsController < ApplicationController
  respond_to :html, :js
def collaboration_search
     #name_search = params[:collaboration][:user_name].to_s
     @users_by_name = User.where('name Like ?', "%#{params[:collaboration]}%").limit(4)
     puts @users_by_name.to_a
      render json: @users_by_name
  end
end

我已经尝试删除turbolinks gem，但这并没有解决问题。我将不胜感激任何帮助！

Answer 1

我不是百分之百确定为什么你的JS第一次没有工作。可能会有很多罪魁祸首，其中Turbolinks通常是一个很好的猜测。但我认为你可以通过尝试以下方法来发现正在发生的事情：

在您的JS文件中抛出console.log('in here');，就在准备好的文档中。加载后，应该打印到Web Inspector控制台。这将帮助您解读文件是否正在加载（但没有正确运行）或者根本没有加载。
确保没有任何JS错误。这些将在Web检查器中以红色显示。
组合JS和ERB的方式可能会导致一个错误或奇怪。 .js.erb文件通常基本上是具有组合JavaScript功能的视图。您通常将其保存在app/views目录中，并告诉控制器如何处理它。在这种情况下，这看起来或多或少是一个常规的JS文件 - 在这种情况下如何包含它是对其功能影响最大的问题。您是否将其包含在application.js文件中？在<head>视图的layout.html.erb标记中？其他方式？

关于此文件的ERBness，值得指出您根本不需要ERB。如果有的话，你使用ERB可能会搞砸了。我看到的唯一类似ERB的行就是这一行：

<% @user = "data" %>;

该行将Ruby / Rails变量@user和用字符串“data”覆盖。这几乎肯定是你不想做的事情。（我不确定它是否会影响变量，因为你在这里使用它。）

tl; dr - 我要重命名文件.js，确保其包含在application.js中，并在文件中添加console.log确保它已加载，因此您可以隔离它是加载问题还是JavaScript问题。另外，检查JS错误，并删除<% @user = "data" %>行。希望上述内容能让您更接近确定发生了什么。

在rails应用程序上使用ruby加载页面时出现javascript问题

1 个答案: